React Hooks 🎣 - One Shot
Tags: react, javascript
Published: 2024-04-08 09:18:20

## 🎣 Reeling in React Hooks

**Introduction:**
Ahoy, React developers! 🌊 Are you ready to dive into the ocean of React Hooks? 🎣 If you've been wondering how to add some serious magic to your functional components, you're in the right place. 🪄 Let's sail through the basics together and get you hooked on Hooks! ⚓️

---

**🎣 Reeling in `useState`: Catching State in Functional Components**
Imagine you're building a simple counter. 🎯 In the old days, you'd need a class component to handle state. But now, with `useState`, it's as easy as pie in a functional component!

```javascript
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 🎣 Catching the count!

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
```

Now you've got a `count` state that updates when you click that button! 🎉

---

**🌟 Casting `useEffect`: Side Effects Made Simple**
Sometimes you need to do something after your component renders, like fetching data or setting up a timer. 🕰 That's where `useEffect` comes in!

```javascript
import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1); // 🌟 Updating the seconds!
    }, 1000);

    return () => clearInterval(interval); // 🌊 Cleaning up the interval
  }, [seconds]); // 🌟 Re-running when seconds change

  return (
    <div>
      <p>Timer: {seconds}s</p>
    </div>
  );
}
```

Voila! 🎩 Now you have a timer that ticks away with `useEffect` magic!

---

**🎨 Painting with `useContext`: Coloring Your Components**
Ever wanted to avoid prop drilling for global data? 🎨 `useContext` to the rescue!

```javascript
import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext); // 🎨 Grabbing the theme!

  return <button style={{ background: theme }}>Themed Button</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeButton />
    </ThemeContext.Provider>
  );
}
```

Now you've got a themed button without passing props all the way down! 🚀

---

**🔧 Crafting with `useReducer`: A Redux Alternative**
For more complex state management, `useReducer` is your tool! 🛠

```javascript
import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
```

Now you can manage complex state logic with ease! 💪

---

**🔍 Peeking with `useRef`: Getting a Closer Look**
Need to access a DOM element directly? 🔍 `useRef` is your magnifying glass!

```javascript
import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null); // 🔍 Peeking at the input element!

  const onButtonClick = () => {
    inputEl.current.focus(); // 🔍 Focusing the input!
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}
```

With `useRef`, you've got direct access to DOM elements! 🎯

---

**⚡️ Conclusion: Your Hooked Journey Begins!**
Armed with these simple yet powerful React Hooks, you're ready to rock your functional components! ⚡️ Whether it's managing state, handling side effects, or accessing DOM elements, React Hooks have you covered. 🚀 So dive in, explore, and let your React apps flourish with the magic of Hooks! 🌟 Happy coding! 🎉

---

Now you're all set to catch some React Hooks! 🎣 Keep this guide close as you navigate the seas of React development! 🌊 Let me know if you have any questions or need more bait for your React adventures! 😉


---

### Practice Time

{% stackblitz react-hooksh %}