React Hooks 🎣 - One Shot

🎣 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!

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!

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!

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! 🛠

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!

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