写 React 组件时经常看到这样的代码：父组件把一个内联函数传给子组件，子组件用 React.memo 包裹，结果发现子组件还是频繁重渲染。打开 React ...

在 React 函数组件里用 useEffect 处理定时器、事件订阅或者异步请求时，经常会遇到一个隐蔽的问题：回调函数里拿到的 state 或 props 永...

在 React 函数组件里用 useEffect 处理副作用时，依赖数组的控制往往比想象中更容易出错。尤其是当副作用内部引用了外部变量或函数，却忘记将它们加入依...

在 React 函数组件里，如果你在 useEffect 中启动了一个 setInterval，并且在回调里读取某个 state，十有八九会发现回调里拿到的永远...

上周帮同事排查一个 React 页面的 bug：点击按钮修改了 state 里的对象属性，接口数据回来了，控制台也打印了新的值，但页面上的数字和列表纹丝不动。代...

在 React 里处理表单输入时，onChange 的表现和原生 DOM 的 change 事件完全不是一回事。原生的 change 通常要等到输入框失去焦点才...

在 React 函数组件中使用 useCallback 时，一个常见的困扰是：明明已经用 useCallback 包裹了回调函数，但内部访问的 state 或 ...

上周排查了一个后台管理页面的卡顿问题，页面里有一个 200 行左右的数据表格，每行都渲染了一个带删除按钮的操作列。用户点击任意一行删除时，整个表格重新渲染，肉眼...

React 的 useEffect 里用 async 函数获取数据这个写法，几乎每个项目里都能见到。大多数情况下页面看起来正常，但遇到路由快速切换、搜索框连续输...

在 React 函数组件中，useEffect 是处理副作用的核心 Hook。很多人习惯把依赖数组当作“触发条件”来用，比如传入一个空数组模拟 componen...

在 React 函数组件里使用 useState 时，很多人会碰到一个看似诡异的问题：明明调用了 setCount，但事件回调或定时器里拿到的 count 始终...

在 React 函数组件中，useEffect 的依赖数组决定了副作用何时重新执行。很多开发者习惯把组件内定义的对象、数组或函数直接放进依赖项，结果发现 use...

很多人第一次写 useEffect 时都会默认“依赖数组就是告诉 React 什么时候重新执行副作用”。这个理解在简单场景下能用，但一旦涉及对象、函数、闭包和并...

在 React 18 的 StrictMode 下，开发环境里组件挂载时 useEffect 会执行两次。这不是 bug，而是 React 为了帮助开发者提前发...

上周排查了一个线上问题：一个用 useReducer 管理表单状态的组件，在某个操作后数据明明已经变了，但界面纹丝不动。用 React DevTools 看，s...

在 React 18 的并发模式（Concurrent Mode）下，组件在开发环境使用 StrictMode 时，useEffect 会执行两次（mount ...

在 React 函数组件里用 useState 管理状态时，经常会遇到一个让人困惑的现象：调用 setState 之后，当前这次渲染中读到的 state 还是旧...

最近在排查一个线上问题时，发现一个组件的定时器在卸载后仍然在跑，导致内存泄漏和额外的请求。代码看起来很正常：useEffect 里启动了 setInterval...