useCallback hook

Callback functions created inside React components and sent to sub components (or other usage outside of the component) will be recreated every time the component is rendered. This leads to unnecessary re-renders in all sub components receiving that function through props.

How it looks now

import react from 'react';

function SomeComponent() {
  function handleCloseDrawer() {
    setIsDrawerOpen(false);
  }

  return <SubComponent onCloseDrawer={handleCloseDrawer} />;
}

Solution

import react, { useCallback } from 'react';

function SomeComponent() {
  const handleCloseDrawer = useCallback(() => {
    setIsDrawerOpen(false);
  }, [setIsDrawerOpen]);

  return <SubComponent onCloseDrawer={handleCloseDrawer} />;
}

Motivation

Unnecessary re-renders lowers performance, but could also potentially lead to unwanted effects because components render without having any actual changes (like if the callback function is recreated, but no other props/state has changed) by triggering useEffect hooks or other logic triggered by re-renders.

A practical way to test if a changes leads to re-renders is to use the React extension for Chrome, and enable highlighting re-renders in the UI. If something you do in the UI, like entering text in an input field or clicking a button leads to re-renders in parts of the page that should not be affecetd by the action taken, it could be caused by unnecessary re-renders.

Proposed transition strategy

Rewrite existing apps to use useCallback where it helps reduce unnecessary re-renders in all apps/libs. Update the following list after implementation:

Proposed change

How it looks now

Solution

Motivation

Proposed transition strategy

Apps

Libs

Proposed change​

How it looks now​

Solution​

Motivation​

Proposed transition strategy​

Apps​

Libs​

Proposed change

How it looks now

Solution

Motivation

Proposed transition strategy

Apps

Libs