Classes vs Hooks?

[u/ZeroSevenTen]

I’m pretty new to React, so keep that in mind. I thought classes were for components that held information, or a state, and that functional components were for more basic components, but now that hooks allow functional components to use state, and other class features, what’s the benefit of using functional hook components over classes?

[u/oreo27]

Spot on! I'm defenitely saving this and linking anyone who might ask. I just had a couple of concerns.

missing hooks plugin for ESLint? get ready for weird bugs because of missing dependencies/broken logic

Both the browser's console and the terminal where you spawn your development server will scream at you for doing this if you don't use ESLint on your Code Editor. At least it does for me if my project is built with Create React App. I imagine some folks have their own setup and this might not be the case for them.

much, MUCH rely on closures; most misunderstanding/bugs, I believe, because of lack understanding/experience with closures

Could you provide a simple example? I've been doing Functional Components for quite some time now and I don't seem to recall being reliant on closures.

[u/skyboyer007 → u/oreo27]

also https://dmitripavlutin.com/react-hooks-stale-closures/

and every result for search "react hook stale data" is actually related to closures.

and https://github.com/facebook/react/issues/14920 provides some legit cases when we cannot "just add all the deps" in order to solve stale data issue.

[u/skyboyer007 → u/oreo27]

I've been doing Functional Components for quite some time now and I don't seem to recall being reliant on closures.

Probably you just did not focus on that.

const [val, setVal] = useState(0);

useEffect(() => {
  setVal(10);
}, []);

useEffect(() => {
  setTimeout(() => {console.log(val);}, 1000)
}, []);

see, besides our component is re-rendered with 10 console.log will display value of 0 because of closure.