useEffect Hook

The useEffect hook in React is used to perform side effects in function components. These side effects include actions like:

• Fetching data from an API

• Direct DOM manipulation

• Setting up subscriptions or timers

• Logging

This hook effectively replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class-based components.

Here’s a simple example:

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

The effect will run every time the count value changes. If you pass an empty dependency array ([]), the effect runs only once—on mount.

You can also clean up effects by returning a function:

useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(timer); // cleanup on unmount
}, []);

useEffect centralizes logic related to side effects, making React function components powerful and expressive. Mastering it is key to building interactive, asynchronous, or real-time applications with React.

What is Superflex.ai?

We’ve all seen great designs lose their edge during development. Superflex solves that by generating real, usable React components directly from your Figma files. It respects your design system, keeps your UI logic clean, and helps developers stay true to the original vision—without extra interpretation or cleanup.