React Hooks

Before 2018, React components were hard to reuse. Then came Hooks. Hooks allow you to "hook into" React features like State and Lifecycle methods from simple functions.

1. useState: Managing Data 💾

State is the "memory" of a component. When state changes, the component re-renders (updates).

How it works:

• count: The current value.
• setCount: The function to update the value.
• useState(0): The initial value is 0.

2. useEffect: Side Effects ⚡

Components should be "pure" (input -> output). But sometimes we need to reach outside:

• Fetching data from an API.
• Setting a timer.
• Changing the document title.

These are called Side Effects.

The Dependency Array []:

• []: Run once (like componentDidMount).
• [count]: Run whenever count changes.
• (No array): Run after every render (Be careful!).

3. useRef: Accessing the DOM 📍

Sometimes you need to grab an HTML element directly (like focusing an input).

Note: Changing a ref does not trigger a re-render.

4. Rules of Hooks 📜

1. Only Call Hooks at the Top Level: Don't call them inside loops, conditions, or nested functions.
2. Only Call Hooks from React Functions: Don't call them from regular JS functions.

Quiz

Key Takeaways

✅ useState handles dynamic data.
✅ useEffect handles API calls and timers.
✅ useRef touches the DOM.
✅ Rules of Hooks keep things stable.

What's Next?

Now that we have the tools, let's learn how to organize them with Component Patterns.

Keep coding! 🚀