React: UseState Vs UseEffect
React: UseState Vs UseEffect

4/16/2026

React hooks can feel annoying at first. For me, they made React seem way more intimidating than it actually is.

But once I took a step back, I realized something important: React is just a JavaScript library.

If you’re already comfortable with JavaScript, especially how functions and events work, then hooks are much easier to understand than they first appear.

Context for Beginners:

React is used to build user interfaces with components. These components update when data changes. React hooks help:

  • store data inside components
  • run logic at specific times in a component’s lifecycle

In this article, I’ll focus on two core hooks:

  • useState
  • useEffect

useState:

I like to think of useState as a way for a component to remember information over time.

const [data, setData] = useState("");

<BlogEditor onChange={setData} />

Here’s what’s happening:

  • data is the current value
  • setData is a function that updates that value
  • When setData is called, React re-renders the component with the new data

So in this example:

  • data starts as an empty string
  • When the user types in the editor, setData is triggered
  • The component updates with the new value

useEffect:

useEffect lets you run code after a component renders.

Depending on how you use it, it can run:

  • once when the component loads
  • every time the component updates
  • or only when specific values change

Here’s an example:

useEffect(() => {

let isMounted = true;

const loadData= async () => {

try {

setLoadError(null);

const data = await getData();

if (isMounted) {

setData(data);

}

} catch (error) {

if (isMounted) {

setLoadError(error instanceof Error ? error.message : "Failed to load data.");

}

}

};

loadData();

return () => {

isMounted = false;

};

}, []);

The empty dependency array [] means this runs once when the component mounts

This pattern is commonly used for fetching data

The cleanup function (return () => {}) runs when the component unmounts

The isMounted check helps prevent updating state after the component is gone

Useful Links:

15