useEffectEvent is coming to React | Frontend Weekly vol. 118

1. useEvent has died, long live useEffectEvent!

More than six months ago, the React team shared with the world a Request For Comments regarding a new useEvent hook. It was supposed to return a stable function reference. At the same time, inside the function state was supposed to always correspond to the current state of the component. Thanks to this behavior, it would be possible to optimize redundant renders very aggressively.

function Chat() {
  const [text, setText] = useState('');

  // 🟡 A different function whenever `text` changes
  const onClick = useCallback(() => {
    sendMessage(text);
  }, [text]);

  return <SendButton onClick={onClick} />;
}

function Chat() {
  const [text, setText] = useState('');

  // ✅ Always the same function (even if `text` changes)
  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

Unfortunately, the RFC did its job and started a lot of discussions. As a result, doubts arose in the minds of the creators of the new hook and they decided to suspend work on its implementation. Two arguments came to the fore. First of all, users could interpret the new hook as a better version of useCallback. In fact, both hooks were supposed to perform slightly different functions. Secondly, next to the useEvent developers have been working on a compiler that would enable automatic memoization (you can learn more about it here). It would simply have been too cumbersome to work on both functionalities simultaneously.

All signs on heaven and earth indicate that useEvent will soon return to us in a changed form. A mysterious PR has appeared in the React repository. It renames useEvent to useEffectEvent and slightly alters its behavior. From now on, the function will not return a stable reference, but you will still be able to refer to it from useEffect without specifying it in the dependencies array.

function Chat() {
  const [text, setText] = useState('');
  const [state, setState] = useState<State>('INITIAL');

  const onHappened = useEffectEvent(() => {
    logValueToAnalytics(text);
  });
  
  useEffect(() => {
    onHappened();
  }, [state]);

  return (/*...*/);
}

For now, the Pull Request is not accompanied by a full RFC, so it’s hard to predict the future of `useEffectEvent` or make broader conclusions about its functionality. Surely when the RFC finally appears we will get a broader context on the whole thing and you will definitely read about it in our weekly.

Sources

https://github.com/facebook/react/pull/25881
https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md

2. Storybook 7.0 is coming

Storybook 7.0 will be the first major release of the tool in more than two years. There was definitely something to look forward to, as the just-released beta version introduces a whole bunch of long-awaited improvements and new features. We’ll take a more detailed look at the new Storybook when the full version is released next year. However, If you are too impatient to wait until then, you can find the list of all changes in the sources list.

New features in Storybook 7.0 beta:
💅 Refreshed design
🚀 Improved performance
🚥 Unit Component tests using Playwright
👉 Interaction tests using Testing Library
🧩 Framework API, the missing piece to enable integration with new libraries and frameworks. We get Next.js and SvelteKit to start, but Remix and Nuxt are already waiting in line
🔰 Full-fledged support for Vite

Sources

https://storybook.js.org/blog/7-0-beta/

3. Year summary from Node Weekly and React Status

The end of the year is close, and this means that all sorts of summaries are coming out. Past week, Peter Cooper – the author of very popular JavaScript newsletters (React Status, Node Weekly, JavaScript Weekly, among others) – decided to devote some of his publications to summarizing the best articles of the past year. If you’re looking for something to read over the Christmas break, you’re definitely find something here.

The Best of Node Weekly in 2022

The Best of React Status in 2022