Scribd
Upload
0 views

Master ⚛️React Hooks In 10 minutes ?-3

The document provides an overview of various React hooks including useState for managing state, useEffect for handling side effects, and useContext for accessing global state. It also covers useRef for managing DOM references, useMemo for optimizing performance, and useCallback for memoizing functions. Additional hooks discussed include useLayoutEffect, useImperativeHandle, useDebugValue, and useId for specific functionalities in React applications.

Uploaded by

SANJAY R
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
0 views

Master ⚛️React Hooks In 10 minutes ?-3

The document provides an overview of various React hooks including useState for managing state, useEffect for handling side effects, and useContext for accessing global state. It also covers useRef for managing DOM references, useMemo for optimizing performance, and useCallback for memoizing functions. Additional hooks discussed include useLayoutEffect, useImperativeHandle, useDebugValue, and useId for specific functionalities in React applications.

Uploaded by

SANJAY R
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/ 14

webGhoul

Managing State in Functional


Components
useState lets you add state to function
components. It returns a stateful value
and a function to update it.

import { useState } from "react";


function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button
onClick={() =>
setCount(count + 1)}
>
Increment
</button>
</div>
);
}
Handling Side Effects in React
useEffect runs side effects like fetching
data, subscriptions, or manual DOM
manipulations.

import { useEffect, useState } from


"react";
function FetchData() {
const [data, setData] =
useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.
com/todos/1").then((response) =>
response.json()
).then((json) => setData(json));
}, []); return (

<pre>
{JSON.stringify(data, null, 2)}
</pre>;
)
}
Accessing Global State with
Context
useContext helps to use values from
React Context without prop drilling.

import { createContext, useContext }


from "react";
const ThemeContext =
createContext("light");
function ThemedButton() {
const theme =
useContext(ThemeContext);
return <button style={{ background:
theme === "dark" ? "#333" : "#fff"
}}>Click Me</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
Managing DOM References and
Preserving Values
useRef creates a mutable object that
persists across renders without causing
re-renders.

import { useRef } from "react";

function FocusInput() {
const inputRef = useRef(null);
return (
<div>
<input ref={inputRef} />
<button onClick={() =>
inputRef.current.focus()}>
Focus
</button>
</div>
);
}
State Management with
Reducers
useRef is an alternative to useState for
complex state logic.

import { useRef } from "react";

function FocusInput() {
const inputRef = useRef(null);
return (
<div>
<input ref={inputRef} />
<button onClick={() =>
inputRef.current.focus()}>
Focus
</button>
</div>
);
}
Optimizing Performance with
Memoization
useMemo caches expensive calculations
between renders.

import { useMemo, useState } from


"react";
function ExpensiveCalculation({ num }) {
const squared = useMemo(() => {
console.log("Calculating...");
return num * num;
}, [num]);
return <p>Squared: {squared}</p>;
} function App()
{
const [num, setNum] = useState(2);
return (
<div>
<ExpensiveCalculation num={num} />
<button onClick={() => setNum(num
+ 1)}>Increase</button>
</div>
);
}
Memoizing Functions to Prevent
Unnecessary Re-Renders
useCallback memoizes functions to
avoid unnecessary recreations.

import { useState, useCallback } from


"react";
function Button({ handleClick }) {
return <button onClick=
{handleClick}>Click Me</button>;
}
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prev) => prev + 1);
}, []);

return (
<div>
<p>Count: {count}</p>
<Button handleClick={increment} />
</div>
);
}
Syncing with the DOM Before
Paint
useLayoutEffect runs synchronously
after DOM mutations but before the
browser repaints.

import { useLayoutEffect, useRef } from


"react";

function Box() {
const boxRef = useRef(null);
useLayoutEffect(() => {
boxRef.current.style.transform =
"scale(1.2)";
}, []);

return <div ref={boxRef} style={{


width: 100, height: 100, background:
"blue" }} />;
}
Syncing with the DOM Before
Paint
useLayoutEffect runs synchronously
after DOM mutations but before the
browser repaints.
import { forwardRef,
useImperativeHandle, useRef } from
"react";

const CustomInput = forwardRef((_, ref)


=> {
const inputRef = useRef();

useImperativeHandle(ref, () => ({
focus: () =>
inputRef.current.focus(),
}));

return <input ref={inputRef} />;


});

function App() {
const inputRef = useRef();
return (
<div>
<CustomInput ref={inputRef} />
<button onClick={() =>
inputRef.current.focus()}>Focus
Input</button>
</div>
);
}
Debugging Custom Hooks
useDebugValue helps to display debug
information in React DevTools.

import { useState, useDebugValue } from


"react";

function useCustomHook(value) {
const [state, setState] =
useState(value);
useDebugValue(state > 5 ? "High" :
"Low");
return [state, setState];
} function App()
{
const [count, setCount] =
useCustomHook(3);
return <button onClick={() =>
setCount(count + 1)}>Count: {count}
</button>;
}
generates stable unique IDs for
elements.
useId generates stable unique IDs for
elements.

import { useId } from "react";

function Form() {
const id = useId();

return (
<div>
<label htmlFor={id}>Name:</label>
<input id={id} type="text" />
</div>
);
}

You might also like