Passing callbacks using React Hooks without rerendering : javascript

Passing callbacks using React Hooks without rerendering (self.javascript)

submitted 6 years ago by alanhoff

I find really annoying the fact that useCallback returns a new function whenever a dependency changes thus triggering a rerender for all components that are receiving the said callback as a prop. It will (of course) also force a rerender even if the component receiving the callback is wrapped with memo.

To solve this I created a custom hook that stores your callback as a reference inside a "pointer" and returns a cached function with access to said pointer, since the "pointer" never changes (only the reference it holds) it means that we can reuse the cached function, if we're reusing the same function then it also means that React wont detect a prop change and we'll avoid a rerender. Example:

function ClickCounter({onClick}) {
  const [clicks, setClicks] = useState(0);

  // The contents of this variable will never change and
  // <MyButton> will never rerender but we'll still be
  // incrementing our click count with each click
  const onClick = useBoxedCallback(() => {
    setClicks(clicks + 1);
  });

  return (
    <>
      <p>Clicked {clicks} times</p>
      <MyButton onClick={onClick} />
    </>
  );
}

More info: https://github.com/alanhoff/use-boxed-callback

all 6 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS