Next.js侧边栏选中项状态初始化：两种方式的优劣与最佳实践

方案一：默认值+useEffect重新赋值 #

先把selectedMenuItem初始化为固定值（比如'1'），再通过useEffect监听路由变化，重新计算并赋值选中项。

优点 #

• 初始渲染时立刻有选中状态，不会出现侧边栏短暂无高亮的情况，避免UI闪烁
• 逻辑拆分清晰，默认值设置和路由匹配逻辑分开，适合复杂场景（比如需要结合异步菜单数据、其他组件状态来判断选中项）

缺点 #

• 会触发两次状态更新：第一次是初始默认值，第二次是useEffect里的赋值，可能带来额外的组件渲染（虽然多数场景下性能影响可以忽略，但复杂组件需注意）
• 如果路由匹配逻辑出现延迟或错误，会先显示默认的'1'再切换到正确项，可能出现短暂的视觉跳转

方案二：useState初始化时直接计算选中项 #

在useState的初始化函数里直接根据当前路由计算出正确的选中项，一次性完成状态初始化。

优点 #

• 只触发一次状态初始化，组件渲染次数更少，性能更优
• 初始状态就是正确的匹配值，不会有UI闪烁或视觉跳转的问题

缺点 #

• 初始化函数仅在组件首次渲染时执行一次，无法响应后续的路由变化（比如路由参数更新但组件未卸载），如果需要动态更新选中状态，这种方式不适用
• 如果路由匹配逻辑复杂，会让useState的初始化代码变得臃肿，降低可读性和可维护性

最佳实践 #

• 静态路由场景：如果菜单和路由是一一对应的固定关系，且不需要动态更新，优先用方案二，直接在useState初始化时计算选中项，既保证UI流畅又节省渲染资源
• 动态/复杂场景：如果需要依赖异步数据、组件props或者监听路由变化来更新选中状态，就用方案一，结合useEffect监听router.asPath（Next.js 13+ App Router用usePathname），同时设置合理的默认值避免空白状态
• 额外优化：可以用useMemo缓存路由匹配的计算结果，减少重复计算；如果菜单数据是异步获取的，要确保在数据加载完成后再执行路由匹配逻辑

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