4 ms·
How do you handle route changes and data fetching, then? Back to Redux?
by the_gipsy 4y ago
How do you handle route changes and data fetching, then? Back to Redux?
- MrPatan 4y agoNever left
- notpachet 4y agoSame boat. It's tiring watching other React devs tie themselves in knots over component lifecycle (either via hooks or class lifecycle methods) when the actual solution is to use neither.
- yamtaddle 4y agoIt's downright pleasant, with typescript. All the "waaaah boilerplate" stuff goes away. It's very simple (not even hard to reimplement, in a pinch). Truly does work well with non-React codebases, so if you build your business logic or at least your client-code around it, it's portable. I stopped being a React fan with hooks, but remain a fan of Redux.
- robertoandred 4y agoThose are results from a change in state, nothing to do with whether a component has appeared.
- the_gipsy 4y agoYou either have some world state, like redux, or you have react components with hooks. With hooks, those have everything to do with the component's lifecycle. Hooks are included with react, world state management is not.
- robertoandred 4y agoWhat? You still use hooks with Redux. And you could consider React's Context API as world state management if you really wanted to. And these still aren't intrinsically tied to a component lifecycle.
- the_gipsy 4y agoSorry I meant useEffect. See react's official docs https://react.dev/reference/react/useEffect#what-are-good-alternatives-to-data-fetching-in-effects https://react.dev/reference/react/useEffect#what-are-good-al... They recommend using react-query (a cached fetching library) and react-router. This combination definitely uses lifecycles to fetch data in the render functions.
- robertoandred 4y agoExcept I don't think they're using or thinking in terms of "lifecycles". With react-query for example, when you use useQuery it communicates behind the scenes via Context with the react-query singleton. It doesn't fetch data because a component has rendered, it does so because a useQuery function call has asked for data it doesn't have in its cache. That may result from a component rendering for the first time, or because that component's props changed, or because some piece of state somewhere in the app changed, etc etc. In the end it doesn't matter. It's not about a component's "lifecycle", it's responding to a change in lowercase-s state.
- the_gipsy 4y agoIt absolutely does fetch because it has rendered. The route changes (or user clicks, whatever), a new component renders and it fetches the first time it renders. This is not a technicality, which is why the thing is called useEffect. It does not fetch without rendering, once.
- robertoandred 4y agoExcept your first useQuery call happens before the component it’s in even returns any JSX for React to render. And you don’t need a useEffect to do this sort of thing. You just need a function that creates a promise keyed to whatever identifier you passed in and some state to hold its status and result.
- 4y ago