react-with-stable

react-with-stable

This package provides stable inline callbacks when passing props.

Please ⭐ star this repo if it's useful!

TL;DR

import { withStable, depFn } from "react-with-stable";

const Event = withStable(["onClick"], ({ onClick }) => (
  <button onClick={onClick}>click</button>
));

const Render = withStable([], ({ render }) => {
  useEffect(() => {
    console.log(render());
  }, [render]);
  return <div>{render()}</button>;
});

export default function App() {
  const [text, setText] = React.useState("a");
  const [other, setOther] = React.useState("a");

  return (
    <div>
      <Event onClick={() => alert(`click: ${text}`)}/>
      <Render render={depFn(() => `render: ${text}`, [text])}/>
    </div>
  );
}

For Event component

No matter how text state changes, the Event component never re-renders because onClick is declared as a stable prop.
But when onClick fires as an event handler, it will get the latest text value.

Note: don't use onClick in effects or rendering.

For Render component

When other changes but text doesn't change, the Render component never re-renders because its props render callback is wrapped by depFn with the dependencies which is text.

You can think depFn as inline useCallback that provide memo callback if the dependencies are the same.

Demo

Please check this codesandbox example. It proves that the withStable wrapped components never re-render unless

1. other non-stable props change
   OR
2. the dependencies of depFn's callback change.

Explanation

This package basically does the same thing as useEventHandler like many community implementaion and useEvent RFC the React team is working on. The difference is that it wraps callbacks in HOC, so it can provide stable identity for inline callback where hook methods can't achieve it.

You have to explicitly provide stable prop keys in the first parameter of withStable like withStable(["onClick"],. This is actually better in concept in most scenario because it should be the callback consumer (i.e. Event component) to know this prop (onClick) is stable and only used in events.

For depFn usage, just consider it as inline useCallback, and list all values used in the callback to the second parameter.