Go back
1 min read

Name your effects

Named functions in useEffect make code clearer, simplify testing, and make stack traces easier to read.

Name your effects

A small but very useful idea from this article: effects in React should be named like ordinary functions. The author suggests treating useEffect as a named action rather than a “magic hook.” In other words, extract the logic and give it a meaningful name:

useEffect(
  function openSocket() {
    // создаем web socket
  },
  [deps],
);

instead of:

useEffect(() => {
  // какая-то магия 🪄
}, [deps]);

Why this matters:

  • 👀 code becomes more readable
  • 🧠 it is easier to understand exactly what an effect does
  • 🔁 it is easier to reuse and test
  • 🐞 stack traces show the function name instead of an anonymous callback

Essentially, this is a small step from “anonymous side effects” toward more declarative code. Sometimes small practices like this deliver more than yet another new hook.

Read

Copied