Creating A Flip Book Animation With React: The declarative way

In today's post, we will learn to create a flipbook style animation by converting a simple class-based component into a functional component.

If you used 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. We will also learn to use it in a more declarative way. More on that later, let's focus on our flipbook nostalgia.

Just like in school with a notebook full of doodles we will be only creating the illusion of movement but hey it’s still pretty fun. Before diving into the nitty-gritty details let’s review the motivation behind this blog.

I stumbled upon this blog when I just started learning React, I found it to be a very simple and interesting approach and challenged myself to convert the class-based implementation into functional components. I migrated the code in minutes but then some issue shot me in the face, I was down for hours searching for answers like why I chose this life, and then Dan's blog resurrected me. Oh wait, I came a long way in the flow, let's rewind.

What are we building?

We are building a component that takes an array of images as a prop and then loop through them to create a moving picture all while retaining the benefits of regular still images on the web.
Like this:

But Harsh we can achieve the same thing with GIF and video, then why so much work? I was out of blog ideas, just kidding, you didn't read that blog? did you? It has explained all the pros and cons of using the different approaches and why the author went with this approach.

Migrating to functional component

Yay! we did it!
I read Dan Abramov's blog thoroughly some days back and realized although our code is working fine, it is not the best way to work with setInterval and he also insists to make it more declarative because you can make arguments “dynamic”, give that blog a read you will understand.

Bonus: The declarative way

The declarative use Interval hook looks like this:

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, delay);
    return () => clearInterval(id);
  }, [delay]);
}

For deep dive into particular part check Dan Abramov's blog .

I used above hook to refactor our code, take a look:

I know using useInterval is overkill for this case but I hope you got something out of it which can help you in future with imperative setInterval pesky behaviour.

A little about me, I am Harsh and I love to play with code and football, I feel at home while building web apps with React. I am currently learning Remix.

If you liked this blog, I am planning to bring more such fun blogs in Future, Let's keep in touch!

Check my Testing hooks blog or how to build generic custom hook blog to manage async code.

Twitter
Linkedin

Check my portfolio: harshkc.tech