Scribd
Upload
15 views12 pages

React Hooks

React Hooks are functions that enable the use of state and other React features in functional components, introduced in version 16.8. They simplify code, improve readability, and enhance performance, with commonly used hooks including useState and useEffect. The useEffect hook allows for handling side effects in components, reacting to lifecycle events like mounting and state changes.

Uploaded by

Muqadas Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views12 pages

React Hooks

React Hooks are functions that enable the use of state and other React features in functional components, introduced in version 16.8. They simplify code, improve readability, and enhance performance, with commonly used hooks including useState and useEffect. The useEffect hook allows for handling side effects in components, reacting to lifecycle events like mounting and state changes.

Uploaded by

Muqadas Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

React Hooks

Hooks
• Hooks are special functions that allow us to use state and other react
features in functional components
• Earlier, we used to create react apps using functional components, we
didn’t had access to state.
• We had to use class components for that
• React version 16.8 and higher hooks are provided
• With hooks, we can make functional components work like class
components.
Benefits of React Hooks
• Simplify code
• Improve readability
• Re-usability
• And overall performance of the application.
Most commonly used hooks
• useState
• useEffect
• useRef
• useMemo
• useCallback
• useContext
• useReducer
• useLayoutEffect
• Custom hooks…
useState
• Creates a “state” variable
• Helps us to track state in components and updates the user interface
when state changes
Updating objects in useState

Instead of making several useState


hooks we can pass an object for similar
attributes. In order to update the value,
we need to pass a fucntion, that
maintains the previous state and only
updates the value, that is changed.
Here, car object is spread and then
color is set to blue, so values for all
attributes not changed is preserved.
• If we call setCount multiple times, it will take the
same initial vlaue 0 and add one to it, so it will
display 1. in order to force change in initial value, we
need to pass a callback to setCount and make use of
prev state and update it. (‘prev’ can have any name)
useEffect Hook
• Allows you to perform side effects in your components.
• Some examples of side effects are:
• Fetching data from API
• Directly updating the DOM
• Timers like setTimeOut and setInterval
useEffect Hook
• Remember lifecycle of a component
• Initialize
• Mount
• Update
• Unmount

• Whenever we need to perform a task that is dependant on another


component’s lifecycle, we use useEffect.
• It takes a callback function and a dependency array as parameters.
• useEffect(()=>{},[])
• Here useEffect will be automatically called on every state change,
since the dependency array is not defined.
UseEffect on component mount
• Here useEffect will be called only once when the component is
mounted.
UseEffect on component lifecycle
states
• In the first useEffect, it will be
called only once when the
component is mounted.
• The second one will be called
after every state change of
counter.
• The third one will be called
when the counter is
unmounted.

You might also like