使用useRef判断组件首次渲染并执行操作是否为反模式或不良代码？

你的代码确实属于不良实践 #

你直接在组件函数体中修改useRef的current值，违反了React的核心规则：组件函数必须是纯函数。

组件渲染阶段的代码应该是无副作用、可重复执行的——React可能在并发模式下多次调用组件函数（比如中断后重新渲染），此时你的isFirstRender.current = false会被意外执行，导致后续逻辑失效；同时，这种写法把副作用逻辑放在了渲染阶段，会让组件行为变得不可预测，排查bug难度陡增。

解决"切换item id时旧数据闪现"的正确思路 #

你遇到的本质问题是：切换id后，MobX store中的旧数据还没被清除，新数据加载完成前组件仍在渲染旧数据。正确的处理方式应该是：

• 当itemId变化时，立即重置对应的数据状态（比如设为null或标记为加载中），让组件先显示加载态而非旧数据；
• 用useEffect处理itemId变化后的副作用（触发数据加载），这才是React官方推荐的副作用执行时机。

示例代码：

"use client"
import { useEffect } from 'react'
import { useStore } from './你的Store路径'

const Component = ({ itemId }) => {
  const store = useStore()

  // 响应itemId变化，重置数据并加载新内容
  useEffect(() => {
    // 先清空当前数据，避免旧数据闪现
    store.setCurrentItem(null)
    // 触发新数据加载
    store.fetchItem(itemId)
  }, [itemId, store])

  const currentItem = store.currentItem

  // 数据未准备好时显示加载态
  if (!currentItem) {
    return <div>加载中...</div>
  }

  return (
    /* 渲染currentItem的JSX内容 */
  )
}

补充说明 #

如果你的"some action"是必须在首次渲染时执行的初始化逻辑，也应该放在useEffect(() => {}, [])（空依赖数组）中，而不是直接在组件函数体里修改ref。useEffect的空依赖数组会确保逻辑只在组件挂载后执行一次，完全替代你用useRef判断首次渲染的需求，且符合React的规则。

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