React Hooks Slider: How to Build an Image Slider With React Hooks

Part 1

Photo by Joseph Barrientos on Unsplash

“Create a slider with React Hooks,” they said. “It will be fun,” they said…

Just kidding — it is fun, and I’m going to show you how to do it. This tutorial has been extended from its original version, to become a three-part series.

Here’s what we will cover in each portion:

Creation of all the components necessary to display an array of content, as well as the ability to navigate back and forth to each slide in our slider. Adding an autoplay feature. We will dive deeper into React Hooks and optimize the slider both for performance and visual appeal. We will achieve this by tapping into useEffect and some new memoization helpers.

I highly recommend reading through the article first, but I have also included a video tutorial at the end of the article, a link to the repository that includes the code, and links to the second and third parts of the series.

Okay, I know what you’re thinking: Let’s get rocking and rolling.