You are a developer with previous experience using React, and you are comfortable using React class components. You’re so comfortable with class components to the point that switching to functional components sounds daunting. How are you going to set state? How can you access the react component lifecycle?

If this sounds like you, then this guide will help you begin transitioning your class components into functional ones. React hooks provide an ability to use state and lifecycle functions within functional components.

We will discuss two built in hooks: useState and useEffect.

useState

A key difference between class and functional components is the fact that class components have a state while functional components are stateless. The useState hook allows us to add local state to a functional component. This hook holds onto a state between re-renders.

Let’s start by comparing the different components.

Class component showing how to use this.setState

#useeffect #react-hook #usestate #react-components #react