Scribd
Upload
26 views4 pages

Reacthooks

It is all about the react hook concepts

Uploaded by

jamaljamaludeen36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views4 pages

Reacthooks

It is all about the react hook concepts

Uploaded by

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

REACT HOOKS

React hooks was first found in react 16.8 version.

Actually there are two components in react app:

1.class component - statefull

2.functional component - stateless

Now React Hooks are used to add the extra features for the functional components.

React hooks doesnot works on class component, it only works on functional component.

React hooks should be declared at the top level.

1.useState():

useState() is used to maintain the state in the functional component.

useState is performed in the form of array.

useState has two things initila value and function.

Example it can be used in todo list, that is the user checked it or not.
2.useEffect():
It is one of the important hook that we use more in functional component.

This hook is used when we want to execute some logic after the component is
rendered.

This is used instead of didmount and didupdate in class component.

This is used in the applications that need to fetch a data from API.

3.useRef():
It is used to gain the direct access to the DOM element.

It can act as a container, which can stores the mutable values.

It uses .current property.


It is used in real time form validation.

4.useMemo():
It is basically used to optimize the performance in react component.

It will contain a dependency array.

Every time when the value of dependency array is changed, it executes the call back
function and then stores the return value.

Next time when ever the component is re rendered, it will returns the stored value , it
doesn’t execute the call back method again.

For example: we have list of products and it price, then want to compute the total price
of all products. In that place we can use useMemo(), to memorize the totale price,then it
only recalculated only the price changes.

5.useContext():
It is used to overcome the prop drilling problem.

It is used to manage the state globally.


We have nested components. The component at the bottom stack of the tree needs
access to state.

In that case we want to pass the props for all the components.

Context provides a way to pass data through the component tree without having to pass
props manually at every level.

For example: In applications with themes useContext() can be used to access the
current theme context throughout the component tree.

6.useReducer():
It is alternative to useState() for managing complex state logic in functional components.

It contains two things initial state and reducer function.

The initial state is the starting point of our state and the reducer function is used to
update the state.

The difference between the usestate and usereducer is usestate is for managing
independent state variable whereas the usereducer is use to perform a complex state
operations.

For example: If the next state is depends on the previous state means on that time we
can use the usereducer.

The realtime example is shopping cart, in that we put some products, remove some
products, update the quantity of product and more.

In that case the usereducer is used.

You might also like