scrollToTop | One click to scroll back to the top of the webpage | Plugin library

I'm an idiot and isMobile is never used in Section1

Turns out I was thinking about AnimatedVisibility all wrong. It's just another Composable. I needed to lift the FAB's modifiers re: positioning to the AnimatedVisibilty's modifiers.

One way you can accomplish this is by tracking where the user is via the location key and the window x, y coords. react-router-dom gives a good idea here.

Here's an example of what that might look like.

you need to provide a unique queryKey for every data that you want to fetch, otherwise, they will keep overwriting each other. The query cache is like an object where the queryKey is the "key" of that object, and your data is the value.

in your example, it would be best to achieve this by adding props.contentSource to the key:

You're looking to have a loader variable for every element of your userAllArticle. You can do this with Arrays, Objects, Sets, or any data structure you want, the implementation will be almost the same.

For sake of simplicity, I will assume that you have IDs available for your posts.

With Sets:

ANSWER TO PROBLEM FOR FUTURE READERS

After reviewing numerous sources and other tutorials, I found a solution to the problem I had.

In short, rather than Lazy Loading components at the Routes in the "App.js" (as can be seen in the code inside the question above) I decided to Lazy Load inside each component that the Route tag is calling. This works because these Routes actually go to components which will load very specific pages depending on the users screen width (see example code below for my signup page):

SignupComponent.js BEFORE LAZY LOADING

This is expected as an optimization strategy. Lets take a look on react-router docs:

https://reactrouter.com/web/api/Route

If the same component is used as the child of multiple s at the same point in the component tree, React will see this as the same component instance and the component’s state will be preserved between route changes. If this isn’t desired, a unique key prop added to each route component will cause React to recreate the component instance when the route changes.

https://codesandbox.io/s/exciting-pike-bv1ij?file=/src/App.js

If you would like to trigger componentDidMount again, just use a key prop. It will unmount and then mount your components as your route change.

You can add history to dependency list of the useEffect() block: