React Hooks为何采用useXXX命名？useEffect命名及副作用定义疑问

Great question—this is something tons of developers grapple with when making the switch from class components to Hooks. Let’s break this down into two clear, practical parts:

1. Why useEffect Covers componentDidMount/componentDidUpdate #

First, the use prefix: this is a non-negotiable rule from React for all Hooks. It’s a quick visual cue for you (and React’s linting tools) that this function follows Hook-specific rules—like only being called at the top level of components, not inside loops or conditionals.

As for the Effect part: the name doesn’t directly reference lifecycle stages because Hooks are built to group logic by what it does, not when it runs.

In class components, you’d split a data-fetching task into two places: componentDidMount (run once on initial load) and componentDidUpdate (run again if a prop like userId changes). With useEffect, you handle both scenarios in a single block using the dependency array:

useEffect(() => {
  fetch(`/api/users/${userId}`).then(res => res.json()).then(data => setUser(data));
}, [userId]); // Runs on mount AND whenever userId changes

The name useEffect focuses on the purpose of the code (handling effects) rather than the lifecycle trigger. It’s a shift in thinking: instead of asking "when do I run this?", you ask "what dependencies does this logic rely on?"

2. Why "Side Effect" for Main-Flow Operations #

Let’s clear up a common misconception first: "side effect" isn’t a negative term here—it’s a standard programming definition.

In React, a component’s core job is to take props and state and return JSX. This is a pure function: same inputs always produce the same output, no external changes involved. Any operation that falls outside this core job is a side effect, including:

• Fetching data from an API (interacts with an external system)
• Manipulating the DOM directly (changes something outside the component’s rendered output)
• Subscribing to WebSockets or timers
• Updating global state (like a Redux store)

Even if an operation feels like part of your app’s "main flow"—like loading initial data—it’s still a side effect because it doesn’t directly produce the UI. The UI is a result of the data you fetch, but the fetch itself is an external interaction that happens after the component renders (or in response to a change).

React uses useEffect to wrap these operations because it ensures they run at the right time: after the component has rendered to the screen, and only when their dependencies change.

内容的提问来源于stack exchange，提问作者hadaytullah