3 ms·

PureComponent is reproducible with React.memo(functionComponent) My main complaint with hooks is people seem to think they always need them. I've seem componen

by city41 7y ago

PureComponent is reproducible with React.memo(functionComponent) My main complaint with hooks is people seem to think they always need them. I've seem components where every single piece of data, no matter how trivial, is slapped into a useMemo(). It becomes a lot of mental overhead to trace through them all, especially confirming the useMemos have the correct dependencies specified. Especially when the vast majority of the time, useMemo just isn't needed.

ratww 7y ago
That's a very common anti-pattern. :( I've seen a lot of cases in the wild where useMemo was used to wrap closures, "for performance reasons", but that's obviously more wasteful than just using the closure by itself. I think a lot of people don't realize that.
- RussianCow 7y ago
  To be fair, if you're passing the closure to a component that extends PureComponent or is wrapped by React.memo, then memoizing the closure will ensure you take advantage of that optimization in the child; otherwise, you're passing a branch new function reference on every render, which means the child is needlessly re-rendering. At work, we have many components that are very complex but take a limited set of props, so these kinds of optimizations are absolutely vital for good performance. That said, you're correct in that this should be the exception and not the rule. It's pointless to do this for a component that returns a single element, as the virtual DOM reconciliation will be much faster than the memoization + props comparison.
  - erikpukinskis 7y ago
    If you have limited props, why would your component be rendering often?
    - RussianCow 7y ago
      Because the parent might render often.
      - erikpukinskis 7y ago
        That shouldn’t cause the child to re-render?
        RussianCow 7y ago
        I'm not sure why you think it wouldn't. Any time a component renders, React also renders all of its children except the ones for which shouldComponentUpdate returns false. If that is defined by using PureComponent or React.memo on a child, then you have to make sure that the props you pass in are not going to change on every re-render (i.e. you can't pass an un-memoized callback because a new function reference will be created on every render). I've created a CodePen to illustrate: https://codepen.io/RussianCow/pen/xxbERLL https://codepen.io/RussianCow/pen/xxbERLL Open the console and watch as the "render child" message is logged once per second, showing that the child is re-rendered every time the parent is.
erikpukinskis 7y ago
> My main complaint with hooks is people seem to think they always need them The low level problem here is your team doesn’t realize that every word of code means something. You need to get past the idea that code has to be there to do a thing and get to the place where you expect every bit of code to explain something. “Why is there a useMemo here”... if your team can’t explain that, then “changes requested”.

by city41 7y ago

ratww 7y ago

That's a very common anti-pattern. :( I've seen a lot of cases in the wild where useMemo was used to wrap closures, "for performance reasons", but that's obviously more wasteful than just using the closure by itself. I think a lot of people don't realize that.

RussianCow 7y ago
To be fair, if you're passing the closure to a component that extends PureComponent or is wrapped by React.memo, then memoizing the closure will ensure you take advantage of that optimization in the child; otherwise, you're passing a branch new function reference on every render, which means the child is needlessly re-rendering. At work, we have many components that are very complex but take a limited set of props, so these kinds of optimizations are absolutely vital for good performance. That said, you're correct in that this should be the exception and not the rule. It's pointless to do this for a component that returns a single element, as the virtual DOM reconciliation will be much faster than the memoization + props comparison.
- erikpukinskis 7y ago
  If you have limited props, why would your component be rendering often?
  - RussianCow 7y ago
    Because the parent might render often.
    - erikpukinskis 7y ago
      That shouldn’t cause the child to re-render?
      - RussianCow 7y ago
        I'm not sure why you think it wouldn't. Any time a component renders, React also renders all of its children except the ones for which shouldComponentUpdate returns false. If that is defined by using PureComponent or React.memo on a child, then you have to make sure that the props you pass in are not going to change on every re-render (i.e. you can't pass an un-memoized callback because a new function reference will be created on every render). I've created a CodePen to illustrate: https://codepen.io/RussianCow/pen/xxbERLL https://codepen.io/RussianCow/pen/xxbERLL Open the console and watch as the "render child" message is logged once per second, showing that the child is re-rendered every time the parent is.

erikpukinskis 7y ago

> My main complaint with hooks is people seem to think they always need them The low level problem here is your team doesn’t realize that every word of code means something. You need to get past the idea that code has to be there to do a thing and get to the place where you expect every bit of code to explain something. “Why is there a useMemo here”... if your team can’t explain that, then “changes requested”.