react-with-stable

react-with-stable

This package provides stable identity inline callbacks when passing props.

Please ⭐ star this repo if it's useful!

TL;DR

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

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

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

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <Event onClick={() => alert(`click: ${text}`)}/>
    </div>
  );
}

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 latest text value.

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

Demo

Please check this codesandbox example. It proves that the withStable wrapped components never re-render unless other non-stable props 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.

This package doesn't solve the old values in closure problem in effects, so I believe useEvent RFC should still be essential.