{"componentChunkName":"component---src-templates-blog-post-js","path":"/making-setinterval-declarative-with-react-hooks/","result":{"data":{"site":{"siteMetadata":{"title":"Ibrahim personal blog","author":"Ibrahim"}},"markdownRemark":{"id":"8b703359-2af1-56d5-a762-9086dafd4d7c","html":"

If you played with React Hooks for more than a few hours, you probably ran into an intriguing problem: using setInterval just doesn’t work as you’d expect.

\n

In the words of Ryan Florence:

\n
\n

I’ve had a lot of people point to setInterval with hooks as some sort of egg on React’s face

\n
\n

Honestly, I think these people have a point. It is confusing at first.

\n

But I’ve also come to see it not as a flaw of Hooks but as a mismatch between the React programming model and setInterval. Hooks, being closer to the React programming model than classes, make that mismatch more prominent.

\n

There is a way to get them working together very well but it’s a bit unintuitive.

\n

In this post, we’ll look at how to make intervals and Hooks play well together, why this solution makes sense, and which new capabilities it can give you.

\n
\n

Disclaimer: this post focuses on a pathological case. Even if an API simplifies a hundred use cases, the discussion will always focus on the one that got harder.

\n

If you’re new to Hooks and don’t understand what the fuss is about, check out this introduction and the documentation instead. This post assumes that you worked with Hooks for more than an hour.

\n
\n

Just Show Me the Code

\n

Without further ado, here’s a counter that increments every second:

\n
import React, { useState, useEffect, useRef } from 'react';\n\nfunction Counter() {\n  let [count, setCount] = useState(0);\n\n  useInterval(() => {    // Your custom logic here    setCount(count + 1);  }, 1000);\n  return <h1>{count}</h1>;\n}
\n

(Here’s a CodeSandbox demo.)

\n

This useInterval isn’t a built-in React Hook; it’s a custom Hook that I wrote:

\n
import React, { useState, useEffect, useRef } from 'react';\n\nfunction useInterval(callback, delay) {\n  const savedCallback = useRef();\n\n  // Remember the latest callback.\n  useEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n\n  // Set up the interval.\n  useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n    if (delay !== null) {\n      let id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n  }, [delay]);\n}
\n

(Here’s a CodeSandbox demo in case you missed it earlier.)

\n

My useInterval Hook sets up an interval and clears it after unmounting. It’s a combo of setInterval and clearInterval tied to the component lifecycle.

\n

Feel free to copy paste it in your project or put it on npm.

\n

If you don’t care how this works, you can stop reading now! The rest of the blog post is for folks who are ready to take a deep dive into React Hooks.

\n
\n

Wait What?! 🤔

\n

I know what you’re thinking:

\n
\n

Dan, this code doesn’t make any sense. What happened to “Just JavaScript”? Admit that React has jumped the shark with Hooks!

\n
\n

I thought this too but I changed my mind, and I’m going to change yours. Before explaining why this code makes sense, I want to show off what it can do.

\n
\n

Why useInterval() Is a Better API

\n

To remind you, my useInterval Hook accepts a function and a delay:

\n
  useInterval(() => {\n    // ...\n  }, 1000);
\n

This looks a lot like setInterval:

\n
  setInterval(() => {\n    // ...\n  }, 1000);
\n

So why not just use setInterval directly?

\n

This may not be obvious at first, but the difference between the setInterval you know and my useInterval Hook is that its arguments are “dynamic”.

\n

I’ll illustrate this point with a concrete example.

\n
\n

Let’s say we want the interval delay to be adjustable:

\n

\"Counter

\n

While you wouldn’t necessarily control the delay with an input, adjusting it dynamically can be useful — for example, to poll for some AJAX updates less often while the user has switched to a different tab.

\n

So how would you do this with setInterval in a class? I ended up with this:

\n
class Counter extends React.Component {\n  state = {\n    count: 0,\n    delay: 1000,\n  };\n\n  componentDidMount() {    this.interval = setInterval(this.tick, this.state.delay);  }  componentDidUpdate(prevProps, prevState) {    if (prevState.delay !== this.state.delay) {      clearInterval(this.interval);      this.interval = setInterval(this.tick, this.state.delay);    }  }  componentWillUnmount() {    clearInterval(this.interval);  }  tick = () => {    this.setState({      count: this.state.count + 1    });  }\n  handleDelayChange = (e) => {\n    this.setState({ delay: Number(e.target.value) });\n  }\n\n  render() {\n    return (\n      <>\n        <h1>{this.state.count}</h1>\n        <input value={this.state.delay} onChange={this.handleDelayChange} />\n      </>\n    );\n  }\n}
\n

(Here’s a CodeSandbox demo.)

\n

This is not too bad!

\n

What’s the Hook version looking like?

\n

🥁🥁🥁

\n
function Counter() {\n  let [count, setCount] = useState(0);\n  let [delay, setDelay] = useState(1000);\n\n  useInterval(() => {    // Your custom logic here    setCount(count + 1);  }, delay);\n  function handleDelayChange(e) {\n    setDelay(Number(e.target.value));\n  }\n\n  return (\n    <>\n      <h1>{count}</h1>\n      <input value={delay} onChange={handleDelayChange} />\n    </>\n  );\n}
\n

(Here’s a CodeSandbox demo.)

\n

Yeah, that’s all it takes.

\n

Unlike the class version, there is no complexity gap for “upgrading” the useInterval Hook example to have a dynamically adjusted delay:

\n
  // Constant delay\n  useInterval(() => {\n    setCount(count + 1);\n  }, 1000);\n  // Adjustable delay\n  useInterval(() => {\n    setCount(count + 1);\n  }, delay);
\n

When useInterval Hook sees a different delay, it sets up the interval again.

\n

Instead of writing code to set and clear the interval, I can declare an interval with a particular delay — and our useInterval Hook makes it happen.

\n

What if I want to temporarily pause my interval? I can do this with state too:

\n
  const [delay, setDelay] = useState(1000);\n  const [isRunning, setIsRunning] = useState(true);\n\n  useInterval(() => {\n    setCount(count + 1);\n  }, isRunning ? delay : null);
\n

(Here is a demo!)

\n

This is what gets me excited about Hooks and React all over again. We can wrap the existing imperative APIs and create declarative APIs expressing our intent more closely. Just like with rendering, we can describe the process at all points in time simultaneously instead of carefully issuing commands to manipulate it.

\n
\n

I hope by this you’re sold on useInterval() Hook being a nicer API — at least when we’re doing it from a component.

\n

But why is using setInterval() and clearInterval() annoying with Hooks? Let’s go back to our counter example and try to implement it manually.

\n
\n

First Attempt

\n

I’ll start with a simple example that just renders the initial state:

\n
function Counter() {\n  const [count, setCount] = useState(0);\n  return <h1>{count}</h1>;\n}
\n

Now I want an interval that increments it every second. It’s a side effect that needs cleanup so I’m going to useEffect() and return the cleanup function:

\n
function Counter() {\n  let [count, setCount] = useState(0);\n\n  useEffect(() => {    let id = setInterval(() => {      setCount(count + 1);    }, 1000);    return () => clearInterval(id);  });\n  return <h1>{count}</h1>;\n}
\n

(See the CodeSandbox demo.)

\n

Seems easy enough? This kind of works.

\n

However, this code has a strange behavior.

\n

React by default re-applies effects after every render. This is intentional and helps avoid a whole class of bugs that are present in React class components.

\n

This is usually good because many subscription APIs can happily remove the old and add a new listener at any time. However, setInterval isn’t one of them. When we run clearInterval and setInterval, their timing shifts. If we re-render and re-apply effects too often, the interval never gets a chance to fire!

\n

We can see the bug by re-rendering our component within a smaller interval:

\n
setInterval(() => {\n  // Re-renders and re-applies Counter's effects\n  // which in turn causes it to clearInterval()\n  // and setInterval() before that interval fires.\n  ReactDOM.render(<Counter />, rootElement);\n}, 100);
\n

(See a demo of this bug.)

\n
\n

Second Attempt

\n

You might know that useEffect() lets us opt out of re-applying effects. You can specify a dependency array as a second argument, and React will only re-run the effect if something in that array changes:

\n
useEffect(() => {\n  document.title = `You clicked ${count} times`;\n}, [count]);
\n

When we want to only run the effect on mount and cleanup on unmount, we can pass an empty [] array of dependencies.

\n

However, this is a common source of mistakes if you’re not very familiar with JavaScript closures. We’re going to make this mistake right now! (We’ve also built a lint rule to surface these bugs early.)

\n

In the first attempt, our problem was that re-running the effects caused our timer to get cleared too early. We can try to fix it by never re-running them:

\n
function Counter() {\n  let [count, setCount] = useState(0);\n\n  useEffect(() => {\n    let id = setInterval(() => {\n      setCount(count + 1);\n    }, 1000);\n    return () => clearInterval(id);\n  }, []);\n  return <h1>{count}</h1>;\n}
\n

However, now our counter updates to 1 and stays there. (See the bug in action.)

\n

What happened?!

\n

The problem is that useEffect captures the count from the first render. It is equal to 0. We never re-apply the effect so the closure in setInterval always references the count from the first render, and count + 1 is always 1. Oops!

\n

I can hear your teeth grinding. Hooks are so annoying, right?

\n

One way to fix it is to replace setCount(count + 1) with the “updater” form like setCount(c => c + 1). It can always read fresh state for that variable. But this doesn’t help you read the fresh props, for example.

\n

Another fix is to useReducer(). This approach gives you more flexibility. Inside the reducer, you have the access both to current state and fresh props. The dispatch function itself never changes so you can pump data into it from any closure. One limitation of useReducer() is that you can’t yet emit side effects in it. (However, you could return new state — triggering some effect.)

\n

But why is it getting so convoluted?

\n
\n

The Impedance Mismatch

\n

This term is sometimes thrown around, and Phil Haack explains it like this:

\n
\n

One might say Databases are from Mars and Objects are from Venus. Databases do not map naturally to object models. It’s a lot like trying to push the north poles of two magnets together.

\n
\n

Our “impedance mismatch” is not between Databases and Objects. It is between the React programming model and the imperative setInterval API.

\n

A React component may be mounted for a while and go through many different states, but its render result describes all of them at once.

\n
  // Describes every render\n  return <h1>{count}</h1>
\n

Hooks let us apply the same declarative approach to effects:

\n
  // Describes every interval state\n  useInterval(() => {\n    setCount(count + 1);\n  }, isRunning ? delay : null);
\n

We don’t set the interval, but specify whether it is set and with what delay. Our Hook makes it happen. A continuous process is described in discrete terms.

\n

By contrast, setInterval does not describe a process in time — once you set the interval, you can’t change anything about it except clearing it.

\n

That’s the mismatch between the React model and the setInterval API.

\n
\n

Props and state of React components can change. React will re-render them and “forget” everything about the previous render result. It becomes irrelevant.

\n

The useEffect() Hook “forgets” the previous render too. It cleans up the last effect and sets up the next effect. The next effect closes over fresh props and state. This is why our first attempt worked for simple cases.

\n

But setInterval() does not “forget”. It will forever reference the old props and state until you replace it — which you can’t do without resetting the time.

\n

Or wait, can you?

\n
\n

Refs to the Rescue!

\n

The problem boils down to this:

\n\n

So what if we didn’t replace the interval at all, and instead introduced a mutable savedCallback variable pointing to the latest interval callback?

\n

Now we can see the solution:

\n\n

This mutable savedCallback needs to “persist” across the re-renders. So it can’t be a regular variable. We want something more like an instance field.

\n

As we can learn from the Hooks FAQ, useRef() gives us exactly that:

\n
  const savedCallback = useRef();\n  // { current: null }
\n

(You might be familiar with DOM refs in React. Hooks use the same concept for holding any mutable values. A ref is like a “box” into which you can put anything.)

\n

useRef() returns a plain object with a mutable current property that’s shared between renders. We can save the latest interval callback into it:

\n
  function callback() {\n    // Can read fresh props, state, etc.\n    setCount(count + 1);\n  }\n\n  // After every render, save the latest callback into our ref.\n  useEffect(() => {\n    savedCallback.current = callback;  });
\n

And then we can read and call it from inside our interval:

\n
  useEffect(() => {\n    function tick() {\n      savedCallback.current();    }\n\n    let id = setInterval(tick, 1000);\n    return () => clearInterval(id);\n  }, []);
\n

Thanks to [], our effect never re-executes, and the interval doesn’t get reset. However, thanks to the savedCallback ref, we can always read the callback that we set after the last render, and call it from the interval tick.

\n

Here’s a complete working solution:

\n
function Counter() {\n  const [count, setCount] = useState(0);\n  const savedCallback = useRef();\n\n  function callback() {\n    setCount(count + 1);\n  }\n\n  useEffect(() => {\n    savedCallback.current = callback;  });\n\n  useEffect(() => {\n    function tick() {\n      savedCallback.current();    }\n\n    let id = setInterval(tick, 1000);\n    return () => clearInterval(id);\n  }, []);\n\n  return <h1>{count}</h1>;\n}
\n

(See the CodeSandbox demo.)

\n
\n

Extracting a Hook

\n

Admittedly, the above code can be disorienting. It’s mind-bending to mix the opposite paradigms. There’s also a potential to make a mess with mutable refs.

\n

I think Hooks provide lower-level primitives than classes — but their beauty is that they enable us to compose and create better declarative abstractions.

\n

Ideally, I just want to write this:

\n
function Counter() {\n  const [count, setCount] = useState(0);\n\n  useInterval(() => {    setCount(count + 1);  }, 1000);\n  return <h1>{count}</h1>;\n}
\n

I’ll copy and paste the body of my ref mechanism into a custom Hook:

\n
function useInterval(callback) {\n  const savedCallback = useRef();\n\n  useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n\n    let id = setInterval(tick, 1000);\n    return () => clearInterval(id);\n  }, []);\n}
\n

Currently, the 1000 delay is hardcoded. I want to make it an argument:

\n
function useInterval(callback, delay) {
\n

I will use it when I set up the interval:

\n
    let id = setInterval(tick, delay);
\n

Now that the delay can change between renders, I need to declare it in the dependencies of my interval effect:

\n
  useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n\n    let id = setInterval(tick, delay);\n    return () => clearInterval(id);\n  }, [delay]);
\n

Wait, didn’t we want to avoid resetting the interval effect, and specifically passed [] to avoid it? Not quite. We only wanted to avoid resetting it when the callback changes. But when the delay changes, we want to restart the timer!

\n

Let’s check if our code works:

\n
function Counter() {\n  const [count, setCount] = useState(0);\n\n  useInterval(() => {\n    setCount(count + 1);\n  }, 1000);\n\n  return <h1>{count}</h1>;\n}\n\nfunction useInterval(callback, delay) {\n  const savedCallback = useRef();\n\n  useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n\n    let id = setInterval(tick, delay);\n    return () => clearInterval(id);\n  }, [delay]);\n}
\n

(Try it on CodeSandbox.)

\n

It does! We can now useInterval() in any component and not think too much about its implementation details.

\n

Bonus: Pausing the Interval

\n

Say we want to be able to pause our interval by passing null as the delay:

\n
  const [delay, setDelay] = useState(1000);\n  const [isRunning, setIsRunning] = useState(true);\n\n  useInterval(() => {\n    setCount(count + 1);\n  }, isRunning ? delay : null);
\n

How do we implement this? The answer is: by not setting up an interval.

\n
  useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n\n    if (delay !== null) {      let id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n  }, [delay]);
\n

(See the CodeSandbox demo.)

\n

That’s it. This code handles all possible transitions: a change of a delay, pausing, or resuming an interval. The useEffect() API asks us to spend more upfront effort to describe the setup and cleanup — but adding new cases is easy.

\n

Bonus: Fun Demo

\n

This useInterval() Hook is really fun to play with. When the side effects are declarative, it’s much easier to orchestrate complex behaviors together.

\n

For example, we can have a delay of one interval be controlled by another:

\n

\"Counter

\n
function Counter() {\n  const [delay, setDelay] = useState(1000);\n  const [count, setCount] = useState(0);\n\n  // Increment the counter.\n  useInterval(() => {\n    setCount(count + 1);\n  }, delay);\n\n  // Make it faster every second!  useInterval(() => {    if (delay > 10) {      setDelay(delay / 2);    }  }, 1000);\n  function handleReset() {\n    setDelay(1000);\n  }\n\n  return (\n    <>\n      <h1>Counter: {count}</h1>\n      <h4>Delay: {delay}</h4>\n      <button onClick={handleReset}>\n        Reset delay\n      </button>\n    </>\n  );\n}
\n

(See the CodeSandbox demo!)

\n

Closing Thoughts

\n

Hooks take some getting used to — and especially at the boundary of imperative and declarative code. You can create powerful declarative abstractions with them like React Spring but they can definitely get on your nerves sometimes.

\n

This is an early time for Hooks, and there are definitely still patterns we need to work out and compare. Don’t rush to adopt Hooks if you’re used to following well-known “best practices”. There’s still a lot to try and discover.

\n

I hope this post helps you understand the common pitfalls related to using APIs like setInterval() with Hooks, the patterns that can help you overcome them, and the sweet fruit of creating more expressive declarative APIs on top of them.

","timeToRead":16,"frontmatter":{"title":"Making setInterval Declarative with React Hooks","date":"February 04, 2019","spoiler":"How I learned to stop worrying and love refs.","tags":null},"fields":{"slug":"/making-setinterval-declarative-with-react-hooks/","langKey":"en"}}},"pageContext":{"slug":"/making-setinterval-declarative-with-react-hooks/","previous":null,"next":{"fields":{"slug":"/Single-responsibilty/","langKey":"en","directoryName":"Single-responsibilty","maybeAbsoluteLinks":[]},"frontmatter":{"title":"the SRP principle"}},"translations":["fr","zh-hans"],"translatedLinks":[]}}}