What it’s essential to know in regards to the React useEvent Hook RFC

In React, referential equality is a vital idea that impacts how usually the parts in your software re-render. On this article, we’ll discover the useEvent Hook from React, which lets you outline an occasion handler with a operate id that’s all the time steady, serving to to handle referential equality in your functions.

It’s vital to notice that on the time of writing, the useEvent Hook is just not accessible to be used and is at the moment being mentioned by React neighborhood.

Referential equality in JavaScript

In JavaScript, you may examine if two values are equal utilizing the id operator, which can also be known as strict equality. For instance, within the following code, you’re evaluating worth a with b:

a === b; // strict equality or indentity operator

The result’s a Boolean worth that tells you if worth a is the same as b or not.

For primitive knowledge varieties, the comparability is made utilizing precise values. For example, if a = 10, and b = 10, the id operator will return true.

Like objects and features, advanced values are a reference sort. Even when they’ve the identical code, two features should not equal. Check out the next instance the place the id operator will return false:

let add = (a, b) => a + b;
let anotherAdd = (a, b) => a + b;
console.log(add === anotherAdd); // false

Nonetheless, if you happen to examine two cases of the identical operate, it returns true:

let thirdAdd = add;
console.log(add === thridAdd); // true

In different phrases, the thirdAdd and the add are referentially equal.

Why is referential equality vital in React?

Understanding referential equality in React is vital as a result of we frequently create completely different features with the identical code. For instance, think about the next code:

operate AComponent() {
  // handleEvent is created and destroyed on every re-render
  const handleEvent = () => {
    console.log('Occasion handler');
  }
  // ...
}

React destroys the present model of the handleEvent operate and creates a brand new model every time AComponent re-renders. Nonetheless, in sure eventualities, this strategy is just not very environment friendly, for instance:

• You utilize a Hook like useEffect that takes an occasion handler in its dependency array
• You may have a memoized part that accepts an occasion handler

In each of those eventualities, you wish to preserve a single occasion of the occasion handler. However, each time a re-render occurs, you get a brand new occasion of the operate, which additional impacts the efficiency, both re-rendering a memoized part or firing the useEffect callback.

You possibly can simply resolve this through the use of the useCallback Hook, as proven beneath:

operate AComponent() {
  const handleEvent = useCallback(() => {
    console.log('Occasion dealt with');
  }, []);
  // ...
}

The useCallback Hook memoizes the operate, that means that every time a operate known as with a novel enter, the useCallback Hook saves a duplicate of the operate. Due to this fact, if the enter doesn’t change throughout re-render, you get again the identical occasion of the operate.

However, the second your occasion handler is determined by a state or prop, the useCallback Hook creates a brand new handler operate every time it modifications. For instance, check out the next code:

operate AComponent() {
  const [someState, setSomeState] = useState(0);
  const handleEvent = useCallback(() => {
    console.log('log some state: `, someState);
  }, [someState]);

  // ...
}

Now, every time a part is re-rendered, the operate is not going to be created. However, if someState modifications, it’ll create a brand new occasion of handleEvent, even when the definition of the operate remained the identical.

The useEvent Hook

The useEvent Hook tries to resolve this drawback; you may use the useEvent Hook to outline an occasion handler with a operate id that’s all the time steady. In different phrases, the occasion handler can be referentially the identical throughout every re-render. Basically, the occasion handler can have the next properties:

• The operate is not going to be recreated every time prop or state modifications
• The operate can have entry to the newest worth of each the prop and state

You’d use the useEvent Hook as follows:

operate AComponent() {
  const [someState, setSomeState] = useState(0);
  const handleEvent = useEvent(() => {
    console.log('log some state: `, someState);
  });
  // ...
}

For the reason that useEvent Hook ensures that there’s a single occasion of a operate, you don’t have to offer any dependencies.

Implementing the useEvent Hook from RFC

The next instance is an approximate implementation of useEvent Hook from RFC:

// (!) Approximate habits

operate useEvent(handler) {
  const handlerRef = useRef(null);

  // In an actual implementation, this may run earlier than format results
  useLayoutEffect(() => {
    handlerRef.present = handler;
  });

  return useCallback((...args) => {
    // In an actual implementation, this may throw if known as throughout render
    const fn = handlerRef.present;
    return fn(...args);
  }, []);
}

The useEvent Hook known as with every render of the part the place it’s used. With every render, the handler operate is handed to the useEvent Hook. The handler operate all the time has the newest values of props and state as a result of it’s basically a brand new operate when a part is rendered.

Contained in the useEvent Hook, the useLayoutEffect Hook can also be known as with every render and modifications the handlerRef to the newest values of the handler operate.

In the actual model, the handlerRef can be switched to the newest handler features earlier than all of the useLayoutEffect features are known as.

The ultimate piece is the useCallback return. The useEvent Hook returns a operate wrapped within the useCallback Hook with an empty dependency array []. Because of this the operate all the time has the steady referential id.

You may be questioning how this operate all the time has the brand new values of props and state. If you happen to take a more in-depth look, the nameless operate used for the useCallback Hook makes use of the present worth of the handlerRef. This present worth represents the newest model of the handler as a result of it’s switched when the useLayoutEffect known as.

When shouldn’t you utilize the useEvent Hook?

There are particular conditions the place you shouldn’t use the useEvent Hook. Let’s perceive when and why.

For one, you may’t use features created with the useEvent Hook throughout rendering. For instance, the code beneath will fail:

operate AComponent() { 
  const getListOfData = useEvent(() => {
    // do some magic and return some knowledge
    return [1, 2, 3];
  });

  return <ul>
    {getListOfData().map(merchandise => <li>{merchandise}</li>}
  </ul>;
}

Unmounting useEffect vs.  useLayoutEffect

The unmounting useEffect Hook and the useLayoutEffect Hook can have a special model of the useEvent handler. Check out the next instance:

operate Counter() {
  const [counter, setCounter] = React.useState(0);
  const getValue = useEvent(() => {
    return counter;
  });
  React.useLayoutEffect(() => {
    return () => {
      const worth = getValue();
      console.log('unmounting format impact:', worth);
    };
  });
  React.useEffect(() => {
    return () => {
      const worth = getValue();
      console.log('unmounting impact:', worth);
    };
  });
  return (
    <React.Fragment>
      Counter Worth: {counter}
      <button onClick={() => setCounter(counter + 1)}>+</button>
    </React.Fragment>
  );
}

If you happen to run this program, you’ll see the unmounting useLayoutEffect has outdated model of the getValue occasion handler. Be at liberty to take a look at the Stackblitz instance.

Conclusion

Though the useEffect Hook isn’t but accessible to be used, it’s undoubtedly a promising growth for React builders. On this article, we explored the logic behind the useEffect Hook, reviewing the eventualities wherein it is best to and shouldn’t use it.

It’s undoubtedly value keeping track of the useEffect Hook, and I’m wanting ahead to ultimately with the ability to combine it into my functions. I hope you loved this text. Joyful coding!