Optimize React's effects with useEventEffect

  • javascript
  • react

React Team is working on useEventEffect which helps you refactor effect by reducing their dependencies and improving logical structure by explicitly distinguishing events from effects. This feature is in in experimental phase so don’t use it in your production applications yet!

After you read article, you can look at a little demo I prepared as an appendix to the following examples. Additionaly, I highly recommend reading the official article about useEventEffect from React blog to dive deeper about into this topic.

When to Use it

When can useEventEffect be useful? It helps when we need to update an effect to directly change feature behavior that needs to be synchronised with state and cannot exist outside effect. For example:

  • WebSockets connection
  • Polling
  • setInterval
  • setTimeout

Examples

const [intervalMs, setIntervalMs] = useState(1000)

useEffect(() => {
    const intervalId = setInterval(callback, intervalMs)
    return () => clearInterval(intervalId)
}, [intervalMs])

Every time when intervalMs changes, we need update the effect to adjust to the new value. But what happen when we have more dependencies and some of them are used in callback()? The component unnecessary re-run the effect if a dependency does not directly affect setInterval.

const [intervalMs, setIntervalMs] = useState(1000)
const [value, setValue] = useState('Hello')

useEffect(() => {
    const intervalId = setInterval(() => {
        displayMessage(value)
    }, intervalMs)
    return () => clearInterval(intervalId)
}, [intervalMs, value])

Using useEffectEvent you can slim down dependencies and reduce unnecessary effect re-runs:

const [intervalMs, setIntervalMs] = useState(1000)
const [value, setValue] = useState('Hello')

const displayMessage = useEffectEvent(() => {
    displayMessage(value)
})

useEffect(() => {
    const intervalId = setInterval(displayMessage, intervalMs)
    return () => clearInterval(intervalId)
}, [intervalMs])

With useEffectEvent, you can be sure that references to outside values is always fresh.

The last example I’d like to present is what happens when interval’s callback needs to consume a value from effect’s dependencies:

const [intervalMs, setIntervalMs] = useState(1000)
const [value, setValue] = useState('Hello')

const displayMessage = useEffectEvent((redirectedToUrl) => {
    displayMessage(value, redirectedToUrl)
})

useEffect(() => {
    redirect(url);

    const intervalId = setInterval(() => displayMessage(url), intervalMs)
    return () => clearInterval(intervalId)
}, [url, intervalMs])

The preferable approach is to pass dependencies directly to effect events for better reliability and readability. It’s more reliable because if url is removed accidentally or on purpose, you’ll receive a warning that displayMessage requires an update or refactor. Additionally, url is always synchronized with the most recent effect run. It’s more readable because it explicitly requires function arguments, making it easier for other programmers to understand how it works and how to maintain it.

Bibliography