Scribd
Upload
83 views3 pages

React - Hooks

Uploaded by

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

React - Hooks

Uploaded by

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

React - Hooks

Topics : React JS
Written on January 03, 2024

React Hooks are functions that allow you to use state and other React features in functional

O
components. They were introduced in React version 16.8 to provide a more convenient way to work
with state and side effects in functional components, eliminating the need for class components in

N
many cases.

Here are some commonly used React Hooks:

H
1. useState:

useState allows you to add state to functional components. It returns an array with two elements:
C
the current state value and a function to update the state.
TE
import React, { useState } from 'react';

function Example() {
const [count, setCount] = useState(0);

return (
YA

<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
AR

);
}

2. useEffect:

useEffect is used for side effects in functional components. It can replace lifecycle methods in
class components.

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

function Example() {
const [data, setData] = useState([]);

useEffect(() => {
// Fetch data or perform side effects here
// This function will run after every render
fetchData();
}, []); // The empty dependency array means this effect runs once after the initial render
return (
<div>
{/* Render UI based on the data */}
</div>
);
}

3. useContext:

useContext allows you to subscribe to React context without introducing nesting.

import React, { useContext } from 'react';


import MyContext from './MyContext';

O
function Example() {
const contextValue = useContext(MyContext);

N
return (
<div>

H
{/* Use the context value */}
</div>
);
}
C
4. useReducer:
TE

useReducer is a hook for managing more complex state logic. It is often preferable to useState
when the next state depends on the previous one.

import React, { useReducer } from 'react';


YA

const initialState = { count: 0 };

function reducer(state, action) {


switch (action.type) {
AR

case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}

function Example() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
</div>
);
}
5. useCallback and useMemo:

useCallback and useMemo are used to optimize performance by memoizing functions and values.

import React, { useState, useCallback, useMemo } from 'react';

function Example() {
const [count, setCount] = useState(0);

const increment = useCallback(() => {


setCount(count + 1);
}, [count]); // Re-created only if count changes

const doubledValue = useMemo(() => count * 2, [count]); // Recalculated only if count changes

O
return (
<div>

N
<p>Count: {count}</p>
<p>Doubled: {doubledValue}</p>
<button onClick={increment}>Increment</button>

H
</div>
);
}
C
© Copyright Aryatechno. All Rights Reserved. Written tutorials and materials by Aryatechno
TE
YA
AR

You might also like