-2

I've created a very simple example here..

https://codesandbox.io/s/react-memo-with-function-props-09fgyo

As you can see, ComponentB renders just as many times as ComponentB.. even though it's wrapped in memo and isn't receiving counter as a prop.

If you open up the app in it's own page (https://09fgyo.csb.app/) and then use React DevTools to profile the page, you'll see that it's reporting it's cause for rendering is because the onClick prop changes (see screenshot)

enter image description here

So.. I know the reason that's happening is because whenever the HOC's state is changed, it re-renders itself, and in doing so, creates a new handleButtonClick because it's an arrow function. So React looks at that and says, "oop.. it's a new function, rerender ComponentB!"

My question is.. what's the best pattern for fixing this kind of performance issue?

I mean.. I guess I could pass setCounter down into CompnentB, but that just seems icky.. tightly couples the HOC and it's state to ComponentB. (Update: Now that I think about it, can't do that either because I'd have to pass down counter as well in order to calculate the increment, and since that's changing, it would also cause a rerender.. ugh.)

I'm seriously at a loss.. Anyone have any ideas?

RavenHursT
  • 2,336
  • 1
  • 25
  • 46
  • Check the `useCallback` hook – PYTHON DEVELOPER999 Apr 29 '22 at 05:45
  • @PYTHONDEVELOPER999 Care to elaborate a bit please? How so? – RavenHursT Apr 29 '22 at 05:46
  • `useCallback` memoizes a function. So on rerender if `useCallback` array dependency hasn't changed it doesn't recreate the function. Check reactjs docs. – PYTHON DEVELOPER999 Apr 29 '22 at 05:47
  • @PYTHONDEVELOPER999 This is setting `handleButtonclick` to a `useCallback`, and the same behavior is persistent: https://codesandbox.io/s/react-memo-with-function-props-w-usecallback-k7hsk1 Not sure how useCallback would be used to solve this? – RavenHursT Apr 29 '22 at 05:49
  • 1
    https://codesandbox.io/s/react-memo-with-function-props-w-usecallback-forked-ww3sr9?file=/src/App.js – PYTHON DEVELOPER999 Apr 29 '22 at 05:51
  • in the example given, `counter` _is_ a dependency, so of course the momoization of the handler doesn't work since `counter` is needed to calculate the increment value to pass to `setCounter`... So still not seeing what you're getting at. And the "RTFM" response isn't exactly helpful. – RavenHursT Apr 29 '22 at 05:51
  • ok.. that's fair.. using useCallback w/ an empty dependency array works. But won't most linters complain if you do that since `counter` is most definitely referenced inside of the handler? – RavenHursT Apr 29 '22 at 05:53
  • please insepct my example carefully. I don't use any outside variables so there's no dependency. – PYTHON DEVELOPER999 Apr 29 '22 at 05:55
  • Isn't `counter` _outside_ of the `handleButtonClick` callback function? – RavenHursT Apr 29 '22 at 06:00
  • 1
    No. I renamed parameter name to `prev` to avoid confusion. Check this out https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous – PYTHON DEVELOPER999 Apr 29 '22 at 06:03
  • 1
    Ooooohhh.. you're passing a _function_ to `setCounter`, not just the increment value... I see! Ok.. now _that_ is much clearer! Thank you! Care to leave an answer on this so I can give you the credit @PYTHONDEVELOPER999 ? – RavenHursT Apr 29 '22 at 06:08

1 Answers1

2

You can use useCallback hook to wrap the function you pass to a child.

It will memoize the function and use the cache instead of recreating the function if none of the useCallback array dependency change.

PYTHON DEVELOPER999
  • 301
  • 2
  • 12
  • Here's an example solution for anyone looking for it: https://codesandbox.io/s/react-memo-with-function-props-w-usecallback-solution-k7hsk1?file=/src/App.js – RavenHursT Apr 29 '22 at 06:23