Using useState and useEffect Hooks

Photo by Eric Muhr on Unsplash

Conquering Components with React's useState and useEffect

Hey there, fellow code enthusiasts! Pretty cool, huh?

🎉 Have you started your journey with React and want to get a handle on making your components dynamic and responsive? Well, you’re in the right place. Today, we’re diving into the magical world of React Hooks, specifically useState and useEffect. You ever wonder about this? these hooks are like superpowers for your components, letting you manage state and side effects in a functional component with ease.

Let's break it down together!

Understanding useState

First off, let's talk about useState. This hook is a fundamental tool in React that lets you add state to your functional components.

Before hooks, state could only be used in class components, but no more!

Honestly, useState makes it super simple to keep track of data in your app’s interface.

Here’s a quick example of how you might use useState:

Source: based on community trends from Reddit and YouTube

Copyable Code Example

const [count, setCount] = useState(0);

const increment = () => {
  setCount(count + 1);
};


In this code, useState(0) gives us a state variable count initialized at 0, and a function setCount to update our state. Whenever increment is called, the count increases by 1. Neat, right?

Exploring useEffect

Next up is useEffect. This hook lets you perform side effects in your component. Think of side effects as anything that reaches outside the component to do something—like fetching data, setting up a subscription, or manually changing the DOM in React.

useEffect is incredibly powerful and versatile. It runs after every render by default, but it can be configured to run only when certain values change. Here’s an example:


useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes


This snippet will update the document’s title every time the count changes, which is super useful for keeping your UI in sync with your state.

Bringing useState and useEffect Together

Now, let’s see both hooks in action within a simple counter app:


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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <div>Count: {count}</div>
    </div>
  );
}

export default Counter;


In this component, useState manages the count, while useEffect keeps the document title updated. Every time you click the button, the count increments, and the effect runs to update the title.

So there you have it! You’ve just seen how to use useState and useEffect in your React applications. By mastering these hooks, you’ll be well on your way to building dynamic, interactive web applications. Whether it’s a simple counter or a full-fledged app, the power of React hooks is at your fingertips. Go ahead, give it a whirl and see what amazing things you can build. Happy coding! 🚀