Scribd
Upload
3 views

React_Hooks_Summary

The document summarizes various React Hooks, including useState for managing component state, useEffect for side effects, and useCallback for memoizing functions. It also covers useMemo for optimizing calculations, useContext for accessing global context, and useRef for referencing DOM elements. Additional hooks like useReducer, useLayoutEffect, useInsertionEffect, useImperativeHandle, and useTransition are briefly explained for handling complex state logic, DOM updates, style insertion, and optimizing UI performance.

Uploaded by

Harsh Parmar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

React_Hooks_Summary

The document summarizes various React Hooks, including useState for managing component state, useEffect for side effects, and useCallback for memoizing functions. It also covers useMemo for optimizing calculations, useContext for accessing global context, and useRef for referencing DOM elements. Additional hooks like useReducer, useLayoutEffect, useInsertionEffect, useImperativeHandle, and useTransition are briefly explained for handling complex state logic, DOM updates, style insertion, and optimizing UI performance.

Uploaded by

Harsh Parmar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Summary of React Hooks

useState:

Manages component state. Syntax: const [state, setState] = useState(initialValue). Example: const

[count, setCount] = useState(0);

useEffect:

Performs side effects like data fetching. Syntax: useEffect(() => { /* code */ }, [dependencies]).

Example: useEffect(() => { fetchData(); }, []);

useCallback:

Memoizes functions to prevent re-creation on each render. Syntax: const memoizedCallback =

useCallback(() => { /* function */ }, [dependencies]). Example: const handleClick = useCallback(() =>

{ console.log('Clicked!'); }, []);

useMemo:

Memoizes expensive calculations to optimize performance. Syntax: const memoizedValue =

useMemo(() => { /* calculation */ }, [dependencies]). Example: const expensiveCalculation =

useMemo(() => calculate(), [data]);

useContext:

Accesses values from a global context. Syntax: const value = useContext(MyContext). Example:

const theme = useContext(ThemeContext);

useRef:

Keeps references to DOM elements or values. Syntax: const ref = useRef(initialValue). Example:

const inputRef = useRef(null);

useReducer:

Alternative to useState for complex state logic. Syntax: const [state, dispatch] =
useReducer(reducer, initialState). Example: const [state, dispatch] = useReducer(reducer, { count: 0

});

useLayoutEffect:

Runs after DOM updates but before browser paint. Syntax: useLayoutEffect(() => { /* code */ },

[dependencies]). Example: useLayoutEffect(() => { console.log('Layout effect triggered'); }, []);

useInsertionEffect:

Ensures styles are applied before painting. Syntax: useInsertionEffect(() => { /* code */ }). Example:

useInsertionEffect(() => { insertStyles(); }, []);

useImperativeHandle:

Customizes the instance value exposed to parent components. Syntax: useImperativeHandle(ref, ()

=> ({ method: () => { /* method */ } })). Example: useImperativeHandle(ref, () => ({ focus: () => {

inputRef.current.focus(); } }));

useTransition:

Handles slow updates and optimizes UI performance. Syntax: const [isPending, startTransition] =

useTransition(). Example: startTransition(() => { fetchData(); });

You might also like