Why use useState over this.state?

Question

I have been learning React hooks lately and I am currently facing useState. I know this is a way to use state in functional components but I wonder what the real benefits are above using a React.PureComponent with this.state?

Is it really bad practice now to use a PureComponent instead of useState or useEffect? Does this make the app "faster"?

I know this question sounds dumb because useState is the new kid on the block but I just need a valid reason to refactor my old components into this new pattern?

Answer 1

Edit: I've been using hooks for a while now and like them a lot (changed my opinion), however it increases the learning curve and there are pitfalls:

Good stuff:

• Not wrapping your component in Higher Order Components (looks cleaner and sometimes order of HOCs can cause issues)
• Composability and re-use becomes easy - splitting code out to custom hooks is second nature. Also reduces argument for adding other abstraction concepts around state management, data fetching, utilities since hooks can do it all.
• No confusion around this (easily avoided with arrow functions in classes tbh)
• Some components come out cleaner and terser (but some especially with lots of event listeners can turn into a hot mess without careful architecture and knowledge of how to make the best use of hooks)
• Some libraries are hook compatible or hook focused only these days (not a "good" thing but an argument for use)

Bad stuff:

• Larger API surface area/knowledge - memo, useCallback, useMemo, useRef, useEffect, useLayoutEffect, useState etc. Ask a beginner how to debounce a callback - suddenly it's a hard problem.
• Functions can become unmanageable since hooks have to all be called in them in the same order (note: you can make your own hook with more hooks inside to split things up)
• Trading confusion around this for much more problems such as:
• Infinite loops when you both read and write to a variable in a memoized hook
• Stale data if you didn't list dependencies, also if you didn't then you can prevent garbage collection on any trapped references.
• Getting into a dependency hell to avoid stale references (wrapping stuff in useCallback, then "tunnelling" some of the variables in with useRef etc)
• Performance degradation since hooks are slower to execute and create, non-hook functions are created every render and also will break purity checks of children, even functions in hooks such as useRef (and I believe useCallback) are quietly created and discarded every render in favour of the first one created.
• Testing hooks nested in a function is harder/more complex than testing class methods

Side note: Solid framework has a better implementation of hooks which don't require dependencies

Answer 2

TL&DR: There is no need to refactor all old components.

useState and others react hooks introduce a new way to implement your components. They can be helpful as they simplify code reusability. You can move your specific logic to a custom hook and use it in several components. Custom hooks can call useState and they don't have any possibility to damage state from other useState calls. It allows you to split component logic more wisely.

So there are 2 main profits of using useState: code reusability and code splitting.

When it's better to refactor old components? Let's say, you have 3-4 legacy components, which make similar things, but it's complicated to reuse code. You can rewrite such components to hooks, move all common logic to custom hook and reuse this hook in all of these components.

Also, if you have any additional questions you can take a look to this https://reactjs.org/docs/hooks-intro.html article

And one important thing: PureComponent equivalent in "functional component world" is to wrap your function with React.memo