[32]

useState

It manages the state in a functional component.

For example, toggle visibility of text.

const [visible, setVisible] = useState(false);
onClick = { () => setVisible(!visible)};

useEffect

React has a new tool called the useEffect hook. It's a versatile and flexible way of controlling the machine's behavior. With useEffect, you can say, "Hey, React, I want to do something when certain conditions are met." You tell React what conditions to watch, like when a specific piece of data changes, subscriptions or manually changing the DOM or when the component is first created. For example, you can use useEffect to say, "When this component is born (componentDidMount), do this thing." Or, "Whenever this piece of data changes (componentDidUpdate), do this other thing." In Simpler Terms, lifecycle methods are like separate buttons and levers for controlling your component's behavior at specific moments in its life. useEffect is like a more flexible tool that you can use to specify when and how you want to do something with your component. In modern React development, the useEffect hook is generally preferred because it offers more control and simplifies how you manage side effects (like data fetching, subscriptions, or DOM manipulation) in your components.

For example, fetching data from an API.

useEffect( () = { fetchData(); }, []);

useContext

It provides a way to share values (like themes, language, etc.) between components without passing props.

For example, get the current theme from context.

const theme = useContext(ThemeContext);

useReducer

It manages complex state logic in a component using reducers.

For example, manage counter state.

const [count, dispatch] = useReducer(reducer, 0);
dispatch({ type: 'increment' });

useRef

It accesses DOM elements or stores a mutable value that doesn’t cause re-renders when updated.

For example, focus on an input field.

const inputRef = useRef(null);
useEffect(() => {inputRef.current.focus();}, []);

useMemo

It optimizes performance by memoizing expensive calculations.

For example, memoize a calculation.

const expensiveCalculation = useMemo(() => computer(num), [num]);

useCallback

It returns a memoized callback function that only changes if a dependency changes.

For example, memoize a click handler.

const handleClick = useCallback(() => { console.log('Clicked'); }, []);

useLayoutEffect

It is similar to useEffect, but runs synchronously after all DOM mutations.

For example, measure DOM nodes.

useLayoutEffect(() => { const rect = divRef.current.getBoundingClientRect(); }, []);

useTransition

It manages state transitions without blocking the UI.

For example, transition state updates.

startTransition(() => { setState(newState); });

useId

It generates unique IDs for accessibility attributes.

For example, generate unique IDs for form elements.

const id = useId();
<label htmlFor={id}>Name</label>