useSafeState.md · evanzyli/ahooks - Gitee.com

forked from zhangrenyang/ahooks

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。

克隆/下载

useSafeState.md 1.10 KB

一键复制编辑原始数据按行查看历史

提交于 2022-04-07 07:28 . update useSafeState.md.

# useSafeState
## 简介
`useSafeState` 与 `useState` 有用法完全一样，但是useSafeState 可以在组件卸载后异步回调内的 `setState` 不再执行，避免因组件卸载后更新状态而导致的内存泄漏。

## [示例Demo](https://codesandbox.io/embed/usesafestate-9lkd20?fontsize=14&hidenavigation=1&theme=dark)
## 源码实现

 `useSafeState`是借助`useEffect`维护了一个组件是否被卸载的状态，如果组件被卸载则不再执行`setState`的方法
   
```javascript
import { useCallback, useEffect, useRef, useState } from "react";

const useUnmountRef = () => {
	const unMountRef = useRef(true);
	useEffect(() => {
		unMountRef.current = false;
		return () => {
			unMountRef.current = true;
		};
	}, []);
	return unMountRef;
};

  

const useSafeState = (initial) => {
	const unMountRef = useUnmountRef();
	const [state, setState] = useState(initial);
	const setSafeState = useCallback((newState) => {
		if (!unMountRef.current) {
			setState(newState);
		}
	}, []);
	return [state, setSafeState];

};

export default useSafeState;
```

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

1

https://gitee.com/evanzyli/ahooks.git

git@gitee.com:evanzyli/ahooks.git

evanzyli

ahooks

ahooks

master