Or maybe you shouldn’t be thinking in terms of a “component lifecycle”.
https://epicreact.dev/myths-about-useeffect/#:~:text=Here%27...
From the documentation for the useEffect SETUP parameter:
> setup: The function with your Effect’s logic. Your setup function may also optionally return a cleanup function. When your component is first added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. After your component is removed from the DOM, React will run your cleanup function one last time.
It’s good advice, because it addresses a major stumbling block people struggle with. After that the code and the way useEffect is used becomes simpler.
> Here's the crux of the issue: useEffect is not a lifecycle hook.
That doesn't leave much room for ambiguity; seems like a definitive statement. Many don't see any nuance here and then go around blasting people for saying useEffect is a lifecycle hook because they read on some blog the exact opposite.
But anyway, what is a lifecycle hook if not a way to synchronize two systems... ( ͡° ͜ʖ ͡°)
Posts like this are almost always insufferable.
There is a very specific way of doing React that influencers and sometimes the React core team push very, very strongly. Sometimes it's justified, but usually I find that it's personal preference being pushed as fact.
I stopped being a React fan with hooks, but remain a fan of Redux.
And these still aren't intrinsically tied to a component lifecycle.
See react's official docs 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.
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.
It does not fetch without rendering, once.
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.
Yes you don't need useEffect. But the alternative is something like redux, where you're components are not (self-contained) components anymore. And the docs recommend effectful libraries.
And no, you don't need useEffect or Redux. You need a promise and some state to track it. Things like react-query aren't "effectful".
So nothing ever renders.
> And no, you don't need useEffect or Redux. You need a promise and some state to track it. Things like react-query aren't "effectful".
Of course a Promise is a side effect. You're talking bullshit.
And a side effect and useEffect are not at all the same thing. You're conflating generic software terms with APIs that have very specific meanings and functions within React.
useEffect is a side effect in a render function. Not all side effects are useEffect in a render function, good job.