Software Development

React hooks: Why use Hooks?

We have use Class components when we want the component to have some state and also provides access life cycle methods such as componentDidMount, componentDidUpdate, and more.

we have to use Functional components when we think your component won’t require any state and they do not have access to any state or life-cycle methods only use props and return some HTML (JSX).

In React 16.8 that allows us to use state and, other react features, like life cycle methods, without writing class component.

What are Hooks? (Special functions )

It reduces the complexity of state control React hooks are a brand new way to get right of entry to the core functions of react which includes state while not having to use classes

In simple words,
Hook is a new characteristic in React’s library to apply state and life-cycle techniques without having to write class components. So your Stateless Functional Components and observe state and life-cycle methods to them.

There are three basic built-in hooks provided to us by React:

1. useState

useState is the way if we need an internal state and don’t need to implement more complex logic such as life cycle methods. useState() is a React hook. Hooks make possible to use state and mutability inside function components.

import React, {useState} from 'react';
const  Demo= () => {
	  const [name, setName] = useState('Akash');
	  return (
		<div className="Demo">
		  <h1> Hello I am {name}</h1>
		  <button onClick={() => setName('Ankit')}>
			Change
		  </button>
		</div>
	  );
	}

Here We have created a constant that returned a pair of objects called name and setName from useState, and we initialized the useState hook to the value of your name.

We used the name property instead of some hard-coded value.

We called the setName function to change the value of the name when the button was clicked.

2.useEffect

With useEffect, you can deal with life cycle events immediately inside functional components. Namely, 3 of them: componentDidMount, componentDidUpdate, and componentWillUnmount

import React, {useEffect, useState} from 'react';

export const EffectDemo = () => {
    //State
    const [fullName, setFullName] = useState({name: 'name', familyName: 'family'});

    //useEffect
    useEffect(() => {
        console.log('useEffect has been called!');
        setFullName({name:'Marco',familyName: 'Shaw'});
    });

    return(
        <div>
            <h3>Name: {fullName.name}</h3>
            <h3>Family Name: {fullName.familyName}</h3>
        </div>
    );
};
	

Above code, the argument of useEffect() is a function that handles your actions when something affects your component.

3.useContext

Problem

Prop Drilling
We pass props down to the levels and levels of the component tree when not all of those components necessarily need those props.

When to use Context

As React suggests “If you only want to avoid passing some props through many levels.

const {Provider, Consumer} = React.createContext(default);
<NameContext.Provider value={"context"}>
      <div className="App">
        <Demo/>
      </div>
    </NameContext.Provider>
	
	
const Demo = () => {
  const value = useContext(NameContext);
  return <h1>Hello! My Name is {value}</h1>;
}

Output: Hello My Name is  context

Custom Hooks

The above 3 are the primary Hooks that you get integrated React. But you may additionally create your personal custom hooks.
Just make sure that your hook’s name starts with “use” in order to allow the React library to understand that the JavaScript function.

Facebook Comments

Get In Touch

hbspt.forms.create({ portalId: "5252078", formId: "92d01160-83bf-4add-b80e-6588168dac74" });

Ask Us Anything !

Do you have experience in building apps and software?

What technologies do you use to develop apps and software?

How do you guys handle off-shore projects?

What about post delivery support?