Introduction to React Hooks

What are Hooks?

Hooks are a new addition in React 16.8. They allow developers use state and other
React features without writing a class For example- State of a component

It is important to note that hooks are not used inside the classes.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Why the need for Hooks?

• Use of ‘this’ keyword

• Reusable stateful logics

• Simplifying complex scenarios

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Important things to remember while using hooks:

• Hooks are available for React version 16.8 or higher.

• Hooks are completely opt-in. Use it partially for a few components or base the whole project on
it as per your needs without rewriting any existing code.

• Hooks don’t contain any breaking changes and are 100% backward-compatible.

• The react team has no plan to remove classes from React.

• Hooks can’t be used inside class components and but the app can definitely mix class-based
components and functional components with Hooks.

• Hooks doesn’t violate any existing React concepts. Instead, Hooks provide a direct API to react
concepts such as props, state, context, refs and life-cycle.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ReactJS | useState Hook

Since version 16.8, a new feature called hooks was added to ReactJS which exposed
the various features of class-based components.

The two most used hooks are the useState() hook, which allows functional
components to have a dedicated state of their own, and the useEffect() hook, which
allows functional components to manipulate DOM elements before each render
(almost like one gets to do it in lifecycle functions).

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 useState() hook allows one to declare a state variable inside a function.

It should be noted that one use of useState() can only be used to declare one state
variable.

Example: Program to demonstrate the basic use of useState() hook.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ReactJS | useEffect Hook

The motivation behind the introduction of useEffect Hook is to eliminate the side-
effects of using class-based components.

For example, tasks like updating the DOM, fetching data from API end-points, setting
up subscriptions or timers, etc can be lead to unwarranted side-effects.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 componentDidMount(){
document.title = `you clicked ${this.state.count} times`;
}

componentDidUpdate(){
document.title = `you clicked ${this.state.count} times`;
}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Let us consider another side-effect by setting up a timer.

On the componentDidMount() method, we set a timer to log a string “hello” every 5

We can clear this timer when the component is being removed from the DOM.

And we do that in componentWillUnmount() life-cycle method.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 componentDidMount(){
this.interval = setInterval(this.tick, 1000)
}

componentWillUnmount(){
clearInterval(this.interval)
}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 componentDidMount(){
document.title = `you clicked ${this.state.count} times`;
this.interval = setInterval(this.tick, 1000)

componentDidUpdate(){
document.title = `you clicked ${this.state.count} times`;
clearInterval(this.interval)
}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 The Effect Hook lets you perform side effects in functional components.

It is a close replacement for componentDidMount(), componentDidUpdate() and

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 useEffect after render:

We know that, the useEffect() is used for causing side effects in functional components
and it is also capable for handling componentDidMount(), componentDidUpdate() and
componentWillUnmount() life-cycle methods of class based components into functional
component.

Let’s look at an example on how to use the useEffect hook as a feature that can mimic
the above mentioned life-cycle methods but in functional components.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video