Change a Stateful React Class Component to a Function Component with the State Hook

Use the React Effect Hook in Function Components

Write a Custom State Hook in React

Write a Custom React Effect Hook

Extract a Custom Hook into its own Module with create-react-hook

Test your Custom Hook Module with react-hooks-testing-library

Prepare a Custom React Hook to be Published as an npm Package

Publish a Custom React Hook as an npm Package

Shareable Custom Hooks in React

In this lesson, you will learn how to take a class component which uses state and convert it to a function component which utilizes the State Hook. The state hook returns a two-item array: the first item is the state value and the second value is the function to update the state value. 

Remember, Hooks can only be used in function components.

Instructor: [00:00] This is what we're going to be working with, a simple class component, should look pretty familiar. This is what it gives us, a simple feedback text area, which we can submit to an API, which is just console logging our texts that we add.

[00:18] First thing we're going to do is copy all of this and create a new file called feedback.function.js, where we'll refactor it. First thing we'll do is import useState, which is the State Hook that we're going to be using. Next thing we'll do is export a function.

[00:37] We'll add the parentheses, and then we'll delete until here and make it just a simple function that we're exporting. Next thing we'll do, we'll take a look...this is how State is declared in a class component. We're going to delete that and instead use the State Hook. We do that by declaring an array which returns two elements, the first being the actual value, in this case text, and then a function normally called SET and then the name of the value.

[01:09] That is something that we're destructuring from useState. There, we pass an initial value. To backup, we have some array destructuring, we have the first value which is text, the second value which is a function to update that and then when we call useState, we pass the initial value. You can get this when you hover over useState.

[01:32] You see a return to Stateful Value, and a function to update it. That's our state. Now let's go through and start updating these functions. Handle submission. We need to add the function keyword. Inside of our console log, we need to change this dot state, dot text instead to text.

[01:52] Then when we reset text to back to an empty string, what we need to do instead is just call Set Text and we can delete this and just pass in our empty string. You can see it's starting to look a lot cleaner. We do the same thing here. Function, and then instead of calling this dot Set State, what we'll do is call Set Text and we pass in our new value.

[02:21] Next thing we'll do is delete this render method, because we don't need that anymore. We don't need to call this dot Handle Submit. We just need to call Handle Submit. Here we just need value to be text and here we just call Handle Text Change. Now what we'll do is change this to our function example and at the top, what we'll do is change this to feedback function component.

[02:57] Then we'll go into App, and we'll import feedback function component from components/feedback/feedback.function. Cool. Then we'll go down here and we'll use it and now if we take a look, we'll have two. We'll just make sure that it's still working. We'll see that it is. That's how you change a stateful class component into a function component with the State Hook.

Course

Shareable Custom Hooks in React

Change a Stateful React Class Component to a Function Component with the State Hook

Share this video with your friends