Creating A Flip Book Animation With React: The declarative way
Tags: javascript, react, webdev, functional
Published: 2021-12-17 07:00:18

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.

![1000 years ago gif](https://media.giphy.com/media/l46CrdPgxGUn3tKN2/giphy.gif)

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](https://medium.com/@ryanwiemer/creating-a-flip-book-animation-with-react-a45902905455) 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:

{% codesandbox 4kz9g %}

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

{% codesandbox 0xvkn %}

Yay! we did it! 
I read [Dan Abramov's blog](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) 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:

```javascript
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](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) .

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

{% codesandbox 0xvkn %}

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](https://dev.to/harshkc/a-quick-guide-to-testing-custom-react-hooks-48ce)  or  [how to build generic custom hook blog](https://dev.to/harshkc/i-promise-this-hook-will-blow-up-your-1000-lines-of-async-codept-2-3ofb) to manage async code.  

[Twitter](https://www.twitter.com/harshkc99) 
[Linkedin](https://www.linkedin.com/in/harshkc99) 

Check my portfolio: [harshkc.tech](https://www.harshkc.tech)