Skip to main content

Posts

Showing posts with the label React Hooks

🪝React Hooks

React Hooks – Complete Guide (With Full Definitions & Examples) When React 16.8 introduced Hooks, they completely changed the way developers write components. Before hooks, if you wanted to use state or lifecycle methods, you had no choice but to write class components. Now, with hooks, you can manage state, side effects, refs, context, and even build your own custom logic inside functional components. Rules of Hooks Definition: The rules of hooks are two principles that ensure hooks work predictably. Explanation: React relies on the order of hook calls to know which state or effect belongs to which component. If you break these rules, React can’t match hooks to the right state. 1. Call hooks only at the top-level Don’t call hooks inside loops, conditions, or nested functions. Always call them in the same order. ✅ Good: function App() {   const [count, setCount] = useState(0); // always at top   return <p>{count}</p>; } ❌ Bad: function App() {   if (true) ...