DEV Community

Sh Raj
Sh Raj

Posted on

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)