1. Definition of four Hooks

Hook	One sentence function
useState	Manage component internal mutable state
useEffect	Handle side effects (things unrelated to React rendering)
useContext	Cross-level shared state/dependencies
useMemo	Cache derived calculation results to avoid repeated calculations

👉 They solve completely different problems

2. Explain clearly one by one (interview level)

1️⃣ useState - local UI state

What is it used for?

• form input
• Is Dialog open?
• Tab switch
• loading (local)

const [open, setOpen] = useState(false)

Features

• State change → Component re-renders
• Only belongs to the current component

🗣 Interview statement:

useState manages local component state that affects rendering.

2️⃣ useEffect - side effect management

What are side effects?

👉 Not to blame JSX

• data request
• Subscribe to events
• DOM manipulation
• Log / Report

useEffect(() => {
  fetchUsers()
}, [])

Key points (foreign companies love to ask)

• Depends on array to decide when to execute
• cleanup prevents memory leaks

useEffect(() => {
  const id = setInterval(...)
  return () => clearInterval(id)
}, [])

🗣 Interview statement:

useEffect handles side effects outside the render lifecycle.

3️⃣ useContext - share data across components

What problem is solved?

Avoid props drilling (pass props layer by layer)

Suitable for:

• current user
• Topic
• Language
• Global configuration

const ThemeContext = createContext("light")

const theme = useContext(ThemeContext)

Features

• All consumer components will re-render
• Not suitable for high-frequency changing data

🗣 Interview statement:

useContext provides shared data without prop drilling.

4️⃣ useMemo - cache "calculation results"

What is it used for?

• Derived Data
• The computational cost is not low
• Avoid double counting

const stats = useMemo(() => compute(users), [users])

Important differences (common misunderstandings)

• ❌ Not used to "avoid re-render"
• ✅ Only cache calculation results

🗣 Interview statement:

useMemo memoizes expensive derived values.

The core differences between three and four Hooks (comparison table)

dimensions	useState	useEffect	useContext	useMemo
Save status	✅	❌	❌	❌
Whether to trigger rendering	✅	❌	Indirect	❌
Whether to deal with side effects	❌	✅	❌	❌
Whether across components	❌	❌	✅	❌
Whether performance optimization	❌	❌	❌	✅

📌 They are not substitutes for each other

4. All ways to transfer values between components (key points)

1️⃣ Father → Son (most common)

<Child name={name} />

function Child({ name }) {}

✅ Most recommended ❌ Not suitable for layers that are too deep

2️⃣ child → parent (callback)

<Child onSubmit={setValue} />

function Child({ onSubmit }) {
  onSubmit("data")
}

👉Essence: functions are also props

3️⃣ Brother components (status improvement)

<Parent>
  <A />
  <B />
</Parent>

👉 Mention state to Parent

4️⃣ Across multi-layer components (useContext)

<UserContext.Provider value={user}>
  <App />
</UserContext.Provider>

const user = useContext(UserContext)

🗣 Interview statement:

I use context for cross-cutting concerns like auth or theme.

5️⃣ Server status (React Query)

👉 Not props, not context

useQuery({ queryKey: ["users"], queryFn })

Multiple components share the same server data.

6️⃣ State management library (Redux/Zustand)

Suitable for:

• The status is complex
• Sharing multiple pages
• Frequent updates

5. Combine the real choices of your project (very important)

In your project:

Scene	What to use
Dialog switch	useState
form submission side effects	useMutation
Users List	React Query
User statistics	useMemo
Theme/Login state	useContext