Important React Hooks

Presented By: Saurabh Choudhary
Important React
Hooks

Lack of etiquette and manners is a huge turn oﬀ.
KnolX Etiquettes
Punctuality
Join the session 5 minutes prior to
the session start time. We start on
time and conclude on time!
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

Our Agenda
01 React Hooks Overview
02 Types of Hooks
03 Built-in Hooks
04 Custom Hook
05 Examples

What is React Hooks?
❖ Hooks are the new feature introduced in the React 16.8 version.
❖ It allows you to use state and other React features without writing a class.
❖ Hooks are the functions which "hook into" React state and lifecycle
features from function components.
❖ It does not work inside classes.

Types
➢ useState Hooks
➢ useEffect Hook
➢ useRef Hook
➢ useCallback Hook
➢ useMemo Hook
➢ useContext Hook
➢ useReducer Hook
Built-In Hooks :
Custom Hooks :
➢ You can create your own custom hooks if you have stateful logic that is needed by
multiple components in you application.

useState Hook
❖ The useState() is a hook that allows you to have state variables in
functional components.
❖ Basically useSate is the ability to encapsulate local state in a functional
component.
❖ The useState hook is a special function that takes the initial state as an
argument and returns an array of two entries.
❖ You pass the initial state to this function and it returns a variable with the
current state value(not necessarily the initial state)and another function
to update this value.

How to implement useState()
Import useState() :-
❖ To use the useState hook, we ﬁrst need to import it into our component.
import { useState } from “react”;
Initialize useState() :-
❖ useState accepts an initial state and returns two values
➢ The current state
➢ A function that updates the state.
function FavoriteColor() {
const [ color, setColor ] = useState(“ ”);

useEﬀect Hook
❖ The useEffect Hook allows you to perform side effects in your
components.
❖ Some examples of side effects are : fetching data, setting up subscriptions,
adding Event Listeners etc.
❖ The useEffect hook is a function that takes two arguments , a function
that needs to be called and an array dependency, where the second
argument is optional.
❖ useEffect runs on every render.
❖ useEffect( <function>, <dependency> ).

How to implement useEﬀect()
Import useEffect() :-
❖ To use the useState hook, we ﬁrst need to import it into our component.
import { useEffect } from “react”;
call useEffect() :-
❖ useEffect accepts two arguments
➢ The function to perform side effects
➢ And a dependency array.
function Component() {
useEffect( ()=>{ do something } , [ dependency ] )

useContext Hook
❖ React Context is a way to manage state globally.
❖ Context provides a way to pass data or state through the component tree
without having to pass props down manually through each nested
component.
Problem : State should be held by the highest parent component in the stack
that requires access to the state.
Suppose we have so many nested components, component at top and bottom requires the
access to the state. To do this without context, we have to manually pass the state as props to
each component in the tree. This is what we call prop drilling in react.

useContext Hook
Solution : The solution is to create context.
To create context
❖ Import createContext from react : import { createContext } from “react”
❖ Initialize it :
const SomeContext = createContext()
Now let’s see the same example with context.

useRef Hook
❖ The useRef hook allows you to persist value between renders.
❖ It can be used to store value that when updated does not cause a re-render.
❖ The useRef hook is used to directly access a dom element.
❖ To use the hook you must ﬁrst import it from react
import { useRef } from “react”
● You can pass the initial value at the time of initialization like:
const xyz = useRef(0)
● useRef() hook only returns one item, an object called current
● so the above initialization is like doing this :
const xyz = { current : 0 }

useReducer Hook
❖ The useReducer hook is similar to the useState hook and is generally more
preferred over useState.
❖ If you have complex state-building logic, useReducer may be useful.
❖ The useReducer hook takes two arguments :
■ A reducer function
■ and Initial State
➢ And it returns two things
■ the current state and
■ a dispatch method

How to implement useReducer Hook
1. Import it from react
import { useReducer } from “react”
2. Initialize it and pass the required two arguments
const [ state , dispatch ] = useReducer (<reducerFn> , <intitalState> )
3. Call the dispatch method when you want to update the state
dispatch( type: <actionType>, <other required argument> )

Custom Hook
❖ Hooks are actually a reusable function.
❖ So If there is a component logic that need to be shared among multiple
components , then we can extract that logic and create a custom hook that
can be used by all the required components.
❖ A custom hook start with use as preﬁx like we have for Built-in hooks
(useState and useEffect etc.). for Example : useFetch()
Let’s see an Example for better understanding.

References
To learn more about Hooks follow the below links :
https://reactjs.org/docs/hooks-intro.html
You can ﬁnd Free and Paid courses here :
https://reactjs.org/community/courses.html

Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA

Important React Hooks

Recommended

More Related Content

What's hot (20)

Similar to Important React Hooks (20)

More from Knoldus Inc. (20)

Recently uploaded (20)

Important React Hooks