为何要在React useEffect中结合MobX autorun使用？

Great question—your simplified version using React's useEffect with explicit dependencies is totally valid and often more straightforward for simple cases. Let's start by referencing the two approaches you've highlighted:

The MobX + React docs show this pattern:

import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
  React.useEffect(
    () => autorun(() => {
      document.title = `${store.title} - ${store.sectionName}`
    }),
    [], // Empty dependencies array
  )
}

And your proposed alternative:

import React from 'react'
function useDocumentTitle(store: TStore) {
  React.useEffect(() => {
    document.title = `${store.title} - ${store.sectionName}`
  }, [store.title, store.sectionName])
}

Now let's break down when each approach makes sense.

Why the Original autorun Approach Might Be Useful #

The autorun pattern has distinct advantages in specific scenarios:

• Automatic dependency tracking: If your logic relies on multiple nested or complex observable properties (e.g., store.user.profile.fullName, store.settings.theme), manually listing every dependency in the useEffect array becomes tedious and error-prone. autorun automatically detects all observables accessed in its callback, so you don't have to worry about missing a dependency that could break your sync logic.
• Dynamic conditional logic: If your title update logic involves conditionals that use different observables (e.g., document.title = store.isEditing ? "Editing: " + store.title : store.title + " - " + store.sectionName), autorun will adjust its tracked dependencies dynamically based on which observables are actually used in each run. With useEffect, you'd have to list all possible observables that could ever be referenced, even if they're only used in some code paths.
• Idiomatic MobX consistency: If your project heavily uses MobX's reactive workflows, using autorun keeps your code aligned with how MobX is designed to work. It feels more natural for teams that are deeply familiar with MobX's reactive principles.
• Avoiding reference equality pitfalls: If your store is a mutable object (common in MobX), adding store to the useEffect dependency array would trigger unnecessary runs if the store reference changes (even if the specific observables you care about don't). autorun ignores the store's reference and only reacts to changes in the observables it accesses directly.

When Your Simplified Approach Is Better #

Your version is absolutely preferable in these cases:

• Simple, explicit dependencies: When you're only relying on a small number of top-level observables (like store.title and store.sectionName), listing them in the dependency array makes the code immediately clear to any React developer—even those who aren't familiar with MobX.
• Minimal React + MobX integration: If your project only uses MobX sparingly, sticking to React's native useEffect pattern reduces cognitive load for team members who primarily work with standard React.
• Static dependency logic: When your logic doesn't involve conditional observable access, the dependency array is just as reliable as autorun and far more concise.

Final Verdict #

There's no hard requirement to follow the original example. Choose the approach that fits your use case and team's preferences:

• Use your simplified useEffect with explicit dependencies for straightforward, low-complexity scenarios where dependencies are clear and static.
• Fall back to autorun (or reaction, if you want to trigger only on specific value changes) when dealing with complex observable dependencies, conditional logic, or when you want to leverage MobX's automatic tracking to avoid manual dependency management.

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