Introduction to Hooks

We know that a Component in React can be created as a Class Component or a function Component. We have discussed that when we want features like Managing State in React Components or responding to Lifecycle methods then we will opt for using Class Components.

Developers have encountered a wide variety of seemingly unconnected problems in React over five years of writing and maintaining tens of thousands of components.

And Majority of them are coming because of using Class Components.

Now the question is What are the Problems of existing Class Components

1. Wrapper Hell

2. Huge Components

3. Confusing Classes

4. classes don’t minify very well

We will discuss few of them in detail in this article and others in our upcoming articles.

React want to present an API out of the box that makes React easier to build great UIs with the best Performance.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

To make function components more powerful, React has introduced several built in hooks.

Hooks in React are Classified into Basic Hooks, Additional Hooks.

Basic Hooks

• useState

• useEffect

• useContext

Additional Hooks

• useReducer

• useCallback

• useMemo

• useRef

• useImperativeHandle

• useLayoutEffect

• useDebugValue

We can also create Custom Hooks.

We will discuss about useState Hook in this article and we will discuss about others in our upcoming articles. In this Process, we will also understand how Hooks make our React Code better.

Lets say we want to develop one Employee Component and we will create it as a Class Component.

We have created the below Component in our last article.

class Employee extends React.Component{

  constructor(props){

    super(props);

    this.state={

      Name:''

    }

  }

  changeName=(e)=>{

    this.setState({Name:e.target.value});

  }

  render(){

    return(

      <div>

        <h2>Welcome to Employee Component...</h2>

        <p>

          <label>Employee Name : 

                  <input type="text" value={this.state.Name} onChange={this.changeName}></input>

          </label>

        </p>

<p>

          Entered Name is : <b>{this.state.Name}</b>

        </p>

      </div>

    )

  }

}

Lets Call this Employee Component and we will render that to our root container.

Save the changes, navigate to the browser. We can see the Output.

If we look at the code we have written, for a simple use case, we are writing more lines of code. That includes writing constructor, calling baseclass constructor. All that involves additional overhead to the application performance. As the application complexity grows, even our code becomes more and it becomes unmanageable.

But as a developer, we don’t want our code to become unmanageable.

Now we will develop a NewEmployee Component but this time we will create it as a function component.

If we look at our Employee Class Component, we have added one property to our state object called as Name and this is initialized to empty. Then we have created one function called as changeName using which we are updating the state object.

In the Same way, even we want to have one Name property and one function to update the Name in our function Component as well.

We wanted our Name to be Stateful. We want to store this Name in the State object and we want to update the Name.

This is where we will make use of useState hook in react.

Remember that hook is a function. So now we are going to call a function called as useState.

This useState function can take one argument that is initialiState value. Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need. In our case, we wanted the state for Name, so we empty.

useState function returns a pair of values: the current state and a function that updates it.

So we can write

const [name,setName]=useState();

Here Name is the Property Name and setName is the function using which we update the value of Name into our state Object.

Lets write one function which will be called when there is a change in the Name.

With in this function, we will update the Name value to our state object usin setName function.

function changeName(e){

    setName(e.target.value);

  }

Lets return the div container, add one h2 Tag with text as Welcome to New Employee Component…

Lets Place one input element and value of that input element should be the name from our state object and we will call changeName function when there is a change.

Next lets display the Entered Name.

return(

    <div>

      <h2>Welcome to New Employee Component...</h2>

      <p>

        <label>Employee Name : 

                <input type="text" value={name} 

                onChange={changeName}></input>

        </label>

      </p>

      <p>

        Entered Name is : <b>{name}</b>

      </p>

    </div>

  )

Now instead of Calling the Employee Component, we will call our NewEmployee Component. Save the changes, navigate to the browser.

We can see that as we keep entering the Name, the entered Name is displayed down to our input element.

We are able to achieve same functionality through a functional component.

If we observe our NewEmployee Component Code, we don’t have a constructor, we are not calling the base class constructor. We have not implemented any render method.

We are Calling a function and it is returning us the output.

Now lets say we want to initialize our name value to Pragim. So we can go to our useState function and pass the value as the input to the function.

const [name,setName]=useState('Pragim);

We can save the changes. Navigate to the browser.

We can see that our textbox is holding the value by default and we can change if needed.

we have introduced ourselves to the concept of Hooks in React. We have a lot to learn and We will continue discussing more about Hooks in our Upcoming articles.

we have just seen an intro to Hooks in React. We will discuss more about Hooks in our Upcoming articles.

Introduction to Hooks

Video Reference: