React Hook - useEvent

👉🏼 Read the article on my website here 👈🏼

TLDR

The useEvent hook will keep the function reference and not recreate between components re-rendered.

Why useEvent?

Consider the following code snippet:

We assume that internally we wrapped the “SendButton” with React.memo and when the “Parent” is re-rendered, the “SendButton” is also re-rendered.

React.memo did shallowly compare between re-renders and it will break the memoization because the handleOnClick function has a unique function reference on every re-render.

If the “SendButton” contains nested or many components, this could cause performance concerns because they will be re-rendered.

Even though the function body is identical, each time it is re-rendered, a new “handleOnClick” function is created, and each one is unique.

Solve with useCallback

We wrapped “handleOnClick” with useCallback. Unless the message dependencies change, it will not construct a new function and the “SendButton” will not re-render. Easy fix though 🤓.

Probably not. Consider If the message is often changing, “handleOnClick” will be unique in each re-rendered version. Furthermore, we can’t remove the message for the dependencies because handleOnClick requires the most recent message value. Goshhhhhhhh.

We did several things, yet the problem still exists. Let’s discuss the useEvent.

Say hello to useEvent

The useEvent interface is similar to useCallback, but it does not include a dependency list. The “handleOnClick” always be the same reference and the message will always reflect the current values.

As a result, memorizing “SendButton” will work because the function of onClick props will always be the same.

Examples of useEvent

This is a bit contrived example but anyway 🥲. As you can see. We are using fetch to get the data. If successful, the success toaster is activated; otherwise, the failure toaster is activated. Moreover, “Toaster” requires the use of theme and message as arguments.

The problem is that once the theme changes, we have to re-run the useEffect and fetch the data because the useEffect has a theme as a dependency. That is not what we want. We only want this component mounted for the first time. Try using the useEvent hook to address the problem.

It can be split into two functions. onFetchSuccess, onFetchFailed and wrapped with useEvent hook. As a result. These functions can access the latest theme value and useEffect to no need to add a theme as a dependency.

When should useEvent NOT be used?

Call the function during the render

If useEvent is called during the render, it will throw an exception. In this case, useCallback still works.

Not all the functions are event

Consider the following snippet for filtering “members” depending on “search”

It’s NOT working. Since “updateMembers” is marked as an event. The useEffect will no longer depend on “search” and “members” will no longer be updated while searching. So make sure that you correctly mark the function as the event.

Conclusions

The useEvent can solve the issue of revalidating too much of the useCallback or answer the question (should I useCallback everywhere?). If you want further reading about useEvent. please check the official RFC on the React Github.

But in the meanwhile, I wrote this article. In the current version of React, the useEvent hook is not available. So keep your eyes peeled for another update! Thank you for reading. Hope you like it. 👋🏼