React Hooks Complete Guide 2026: useState, useEffect, useRef, useMemo and Custom Hooks

React Hooks transformed how we write React components. In 2026, hooks are the standard. Here's everything you need to know. useState — The Foundation import { useState } from ' react ' ; function Counter () { const [ count , setCount ] = useState ( 0 ); return ( < div > < p > Count: { count } </ p > < button onClick = { () => setCount ( c => c + 1 ) } > + </ button > < button onClick = { () => setCount ( c => c - 1 ) } > - </ button > < button onClick = { () => setCount ( 0 ) } > Reset </ button > </ div > ); } Functional Updates Always use functional updates when new state depends on old state: // Wrong - may use stale closure setCount ( count + 1 ); // Correct - always uses latest state setCount ( prevCount => prevCount + 1 ); Object State const [ user , setUser ] = useState ({ name : '' , email : '' , age : 0 }); // Merge updates (like setState in class components) const updateName = ( name ) => { setUser ( prev => ({ ... prev , name })); }; useEffect — Side Effects import { useEffe