React Interview? You Should Know useEffect

---

Recently, I was helping a frontend dev to get ready for interviews.
First, we restructured his resume as a single column, clear, readable, no graphic, no image , no fancy diagrams. Then, we updated his LinkedIn profile to attract recruiters. After that, he started applying for jobs with a clear and strategic plan.Especially for hidden jobs…

Everything was going great.

But unfortunately… he got rejected for a very simple reason.

Where did he fail?

On what I call the “alphabet of React” , useEffect :(

---

image source

The question was basically …Imagine you have a counter button. Each time you click it, how does useEffect work in that case?

---

Let’s understand how really works useEffect in React lifecycle.

What is useEffect?

• useEffect is a React Hook that lets you synchronize a component with an external system.

• Side effects are anything that affects something outside the scope of the function running, such as:

• Fetching data from an API (client communication)

• Manipulating the DOM directly

• Setting up subscriptions or timers

• Updating document title

React renders UI purely, but side effects are impure. That’s why they go inside useEffect.

What I mean …

As you know react renders the UI purely, so it just turns your state and props into what the user sees.

But side effects are impure because they interact with things outside your component. For example :

• document.title = “New Title” — — — → updating your title

• fetch(“https://api.example.com")) — — → fetching data from api

• (setInterval(() => {}, 1000)) — — — -> setting a timer

These actions don’t directly return JSX. Instead, they do something external, which is why they belong inside useEffect.

---

When you should use useEffect?

1. Fetching data from APIs

• Getting user data when component loads.

1. Listening to events

• Adding a window resize listener.

1. Interacting with browser APIs

• Local storage, cookies, document title.

1. Setting up intervals or timers

• Auto-refreshing data every 5 seconds.

1. Cleaning up subscriptions

• WebSocket connections, event listeners.

When you should not use useEffect?

For direct UI logic that belongs in render.

For example:

• If you want to derive UI from props or state, do it directly in JSX, not in useEffect.

• Avoid using useEffect to update state unnecessarily, which causes extra renders and performance issues.

// Bad
const [fullName, setFullName] = useState("");
useEffect(() => {
  setFullName(firstName + " " + lastName);
}, [firstName, lastName]);

// Good
const fullName = firstName + " " + lastName;

---

Is useEffect for client, DOM, or server?

• useEffect only runs on the client side.

• It runs after the render is committed to the DOM.

• On the server (e.g. Next.js SSR), useEffect does not run. If you want server-side logic, use Next.js server functions or getServerSideProps.

---

How does dependency array [ ] work?

I think now you got the logic how it works with clicking a button.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("useEffect ran");
  });

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

What is happening in teh above simple code?

• Every time you click the button, setCount updates the count state.

• When state changes, the component re-renders.

• Because this useEffect has no dependency array, it runs after every render — both the initial render and every update.

Lets summarize it.

→ No dependency array: runs after every render.
→ Empty dependency array []: runs only once after first render.
→ With [count]: runs after first render and whenever count changes.

---

Caveats

• useEffect is a Hook, so you can only call it at the top level of your component or your own Hooks. You can’t call it inside loops or conditions. If you need that, extract a new component and move the state into it.

• If you’re not trying to synchronize with some external system, you probably don’t need an Effect.

• When Strict Mode is on, React will run one extra development-only setup+cleanup cycle before the first real setup. This is a stress-test that ensures that your cleanup logic “mirrors” your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.

• If some of your dependencies are objects or functions defined inside the component, there is a risk that they will cause the Effect to re-run more often than needed. To fix this, remove unnecessary object and function dependencies. You can also extract state updates and non-reactive logic outside of your Effect.

• If your Effect wasn’t caused by an interaction (like a click), React will generally let the browser paint the updated screen first before running your Effect. If your Effect is doing something visual (for example, positioning a tooltip), and the delay is noticeable (for example, it flickers), replace useEffect with useLayoutEffect.

• If your Effect is caused by an interaction (like a click), React may run your Effect before the browser paints the updated screen. This ensures that the result of the Effect can be observed by the event system. Usually, this works as expected. However, if you must defer the work until after paint, such as an alert(), you can use setTimeout. See reactwg/react-18/128 for more information.

• Even if your Effect was caused by an interaction (like a click), React may allow the browser to repaint the screen before processing the state updates inside your Effect. Usually, this works as expected. However, if you must block the browser from repainting the screen, you need to replace useEffect with useLayoutEffect.

• Effects only run on the client. They don’t run during server rendering.

---

Note

An Effect lets you keep your component synchronized with some external system (like a chat service). Here, external system means any piece of code that’s not controlled by React, such as:

• A timer managed with setInterval() and clearInterval().

• An event subscription using window.addEventListener() and window.removeEventListener().

• A third-party animation library with an API like animation.start() and animation.reset().

If you’re not connecting to any external system, you probably don’t need an Effect.

---

I hope you got the point and will explain in the next interview.

If you want to support me, please feel free to subscribe and receive my articles in your email weekly.

Let’s Connect Medium | LinkedIn | Substack