react-with-stable

This package provides stable inline callbacks when passing props.

Please ⭐ star this repo if it’s useful!

Stable inline event callback

Take this example from useEvent RFC.

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

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

function Chat() {
  const [text, setText] = useState('');
  return <SendButton onClick={() => { sendMessage(text); }} />;
}

No matter how text state changes, the Chat 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 rendering.

Stable inline callback for render or effect

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

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>
      <Render render={depFn(() => `render: ${text}`, [text])}/>
    </div>
  );
}

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 dependency which is text.

You can consider depFn as inline useCallback that provides memo callbacks when 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. dependencies of depFn wrapped 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. Chat 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.

GitHub

View Github