Use React.lazy to do code-splitting with React Suspense

Use React.memo to avoid unnecessary re-renders in React functional components

Add state to functional React component with useState hook without introducing a class

Use React useEffect hook to see how many times component mounts and unmounts

Learn React lazy, memo, useState and useEffect in 7 minutes

Most React developers knows the pain of refactoring a functional component only because we would like to add a state to it.

In this lesson we are going to learn a new way of handling that - React 16.7 alpha introduces a concept of hooks, which allow us to well... hook into existing React features (such as state) from inside of a functional component. By using a `useState` hook we introduce state to a `Counter` component without introducing a class.

https://app.egghead.io/api/v1/lessons/react-add-state-to-functional-react-component-with-usestate-hook-without-introducing-a-class/subtitles

Instructor: [00:00] We have a simple counter component which takes a count as a prop and displays it. Also, we want to have a button which allows us to update a counter. Counter is a functional component, and it's rendered over here. The usual way of adding state to a counter component would be to change it to a class.

[00:19] We're not going to do that. Instead, we are going to use a new hook from React which is called useState. This component's not going to accept a prop anymore. We can remove it from both places. Next, to add state to our functional component, destructure the count, and set count from useState, zero.

[00:40] After we save it, we see that the value of count has been set to zero, because this is the default value we've provided to useState call. To use this set count function, we need to attach it to an onClick handler to the button. We're going to do setCount, count plus one.

[00:57] Now, we have the desired effect. By default the count is set to zero. Whenever I click the button, the counter is going to be updated. The reason it works is because useState allows us to hook into React features such as state, without transforming the counter component into a class component. It can remain as a functional component.

Add state to functional React component with useState hook without introducing a class

Share this video with your friends

Course

Learn React lazy, memo, useState and useEffect in 7 minutes