In this article. we are going to see how functional segments can be used with React hooks to reduce the length of code used in writing class-based components, while still obtaining all their features.
We are going to use TypeScript for this tutorial so that our code remains 100% typesafe, and I must say, if you are doing a big project, Typescript is a must feature one should go with to help keep code clean.
The above command will generate a project named “codersera-hooks-tutorial”. Once it is finished, go to the directory and either
npm start or
yarn start will give the push to the project.
We will be using yarn throughout this tutorial to maintain uniformity.
Now, we’re going to integrate antd ( a design library by the name of ant design), which we will be using to have some standard UI components. (Note, this does not have anything to do with hooks or React in general.)
You may also like:
Thinking in React Hooks: Building an App With Embedded Analytics.
Integrating antd in React With Hooks
Add antd as a dependency
antd CSS to load stylings.
After this, we now have a full TypeScript setup from React with the antd design library integrated.
Using State With Hooks in React (React.useState)
Let us see how to work with hooks. For this, we are going to make a single form segment that will show its value in the input field after submitting the form.
Create a StateHooksComponent.tsx file inside the src/components directory (Create the directory folder if it’s not already there.)
Now create a function,
StateHooksComponent and import the component in the App.tsx file.
After this, App.tsx will look like this:
Now, let’s add a button, input field, and output view in our
useState function will return two things, the state variable, and a dispatcher to set the state. We can apply any naming form, but it’s clear to use the following syntax:
handler is designated with an arrow function. For example, there are two handlers:
After making the necessary edits, your component will look something like this:
Here is the output you should expect after writing some content in the box and clicking on the box
Using Effects/Lifecycle With Hooks (React.useEffect)
useEffect provides the features of
componentWillUnmount in one function.
Now, the above code is an example of generic
useEffect, notice the empty array above. There are three ways in which the
useEffect can be used:
- If the array is empty, the function will be executed once during the mounting of the segments, and the return function will be executed during unmounting. For example, this can be used to initiate API calls to fetch data that needs to be shown on the UI.
- If no array is provided, the function will be executed before and after each render. This is used to record the number of times rendering is taking place.
- If there is any state variable inside the array, then the function is executed once on the mounting of the component, and then each time the state is changed, the function is called.
Now, each time the user types any character in the input field, which is assigned to auto-suggest options, data will be fetched from the server and updated to options state, which can be used to show the auto-suggest options.
Below is the code block to show how the use effect will be called:
The above code will produce the following output image
instead of class-based components and still use all the features that you were able to do with class lifecycle methods.