Recoil中如何单独获取setter方法更新状态无需获取对应state值

直接使用Recoil内置的useSetRecoilState Hook即可，该Hook只会返回对应atom状态的更新函数，不会订阅状态值的变化，完全适配仅需更新状态、无需读取状态值的场景。

代码示例 #

原atom状态定义无需修改：

export const UserName = atom({
    key: 'username',
    default: ''
})

组件内替换原有useRecoilState的写法即可：

import { useSetRecoilState } from 'recoil'

// 直接获取setter方法，不会订阅username的状态变更
const setUsername = useSetRecoilState(UserName)

const doSomethingOnClick = () => {
  setUsername('coolName')
}

补充说明 #

• 这种写法相比useRecoilState性能更好：因为组件没有订阅状态值，当username被其他位置修改时，当前组件不会触发无意义的重渲染。
• 如果更新状态时需要依赖旧状态值，依然可以给setter传入更新函数，不需要提前读取状态值就能拿到最新的前置状态，示例：

setUsername(prevName => `${prevName}_new`)

注意：useSetRecoilState返回的setter函数引用是稳定的，不会随组件重渲染变化，可以放心放到useEffect依赖数组、回调函数的依赖中，不会引起不必要的effect触发。

内容的提问来源于stack exchange，提问作者A curious student