9

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?

Walter Monecke
  • 2,386
  • 1
  • 19
  • 52

4 Answers4

10

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

Dominic
  • 62,658
  • 20
  • 139
  • 163
  • 1
    Wow, thanks! The "wow hipster" is a way to put the feeling I had in plain words. – Walter Monecke Sep 11 '19 at 10:52
  • After having written functional components for a while now I can confidently say FCs have a lot less boilerplate. useState and useEffect are more intuitive to me. - 2022 (A lot of the bad stuff in this comment can be solved with good lining rules) – Walter Monecke Sep 06 '22 at 17:33
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

Nik
  • 2,170
  • 1
  • 14
  • 20
1

useState, this.state and PureComponent are different terms and need not be confused together. As you understand useState is a way of handling state in a functional component whereas you use this.state for a class component.

As far as PureComponent is concerned, it used to optimize renders and you can use React.memo for the same purpose for a functional component.

Also as far as refactoring is concerned, there is no need to do that since Class components will continue to exist and react community recommends you to not refactor the previous code.

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
0

I recommend for you to watch React Today and Tomorrow and 90% Cleaner React With Hooks

also, you can read Introducing Hooks

according to using pureComponent, pureComponent is similar to Component which is Class, check classes confuse both people and machines section to understand why functions are better than classes.

Mustafa Abdelmogoud
  • 114
  • 5