[Feature Request] Allow useEffect/useLayoutEffect to have previous values

dmytro-lymarenko
创建于
2019-09-27 06:34:06

Do you want to request a feature or report a bug?
Feature
What is the current behavior?
Say I have some count and an effect described to its update:

const [count, setCount] = useState(0);

useEffect(
	() => {
		// I need to do something with the difference of how the count was changed
		// const diff = count - prevCount;
	},
	[count]
);

with current implementation I need to use useRef to have previous count:

const [count, setCount] = useState(0);
const prevCountRef = useRef<number>(0);

useEffect(
	() => {
		// I need to do something with the difference of how the count was changed
		const diff = count - prevCountRef.current;

		prevCountRef.current = count;
	},
	[count]
);

which is actually not so bad if I need to track only one diff, right? ;)

What is the expected behavior?

So I would like to have previous dependencies right inside useEffect like this:

const [count, setCount] = useState(0);

useEffect(
	([prevCount]) => {
		// I need to do something with the difference of how the count was changed
		const diff = count - (prevCount || 0);
	},
	[count]
);

So the callback in useEffect gets the same array as dependencies but with previous values.
For first render we can pass to the callback either empty array or undefined.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.9.0"

2条回答
threepointone
回复于
2019-09-27 13:04:14
#1

Do you think you could encapsulate this as a custom hook instead?

dmytro-lymarenko
回复于
2019-09-27 13:35:24
#2

@threepointone I think yes:

function useCustomEffect<Dep extends any[]>(
	callback: (prevDependencies: Dep | null) => void | (() => void),
	dependencies: Dep
) {
	const prevDependencies = useRef<Dep | null>(null);

	useEffect(() => {
		const cleaner = callback(prevDependencies.current);

		prevDependencies.current = dependencies;

		return cleaner;
	}, dependencies);
}

but callback is dynamic and is not passed down to useEffect's dependencies array. Would not this way break the rule of useEffect:

Note

If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect.

?

当前位于第1页,总计2 条回复

推荐相似问题

Error: "Minified React error

It was an internal error on my project
讨论数 3
react
创建时间:2019-09-26 20:54:25

Bootstrap select element not rendered with react-router

I am making a basic app in reactjs. I've setup routes for 3 components. The problem is select fields don't appear when t
讨论数 3
react
创建时间:2019-09-26 20:43:56

eslint-plugin-react-hooks feature request: enforce naming convention for useState()

Do you want to request a feature or report a bug? Feature What is the current behavior? There is currently no rule to en
讨论数 6
react
创建时间:2019-09-26 19:03:11

Stateless function components cannot have refs.

After applying Route and Link I am facing this problem. Stateless function components cannot have refs. ▶ 22 stack frame
讨论数 2
react
创建时间:2019-09-26 16:15:38

A note on function components default parameters

When you define default parameters for a function component, the component will have brand new parameters on every rende
讨论数 8
react
创建时间:2019-09-26 14:51:44

More time between releasing @next and @latest

As a library author, I test against both the @next and @latest versions of react and react-dom (as well as 16.3, the old
讨论数 3
react
创建时间:2019-09-26 14:18:06

can ReactDOM.render render to body without warning

Do you want to request a feature or report a bug? feature What is the current behavior? I want render dom struct like wh
讨论数 5
react
创建时间:2019-09-26 06:44:57

Why does parent's componentDidMount gets called first, then child's?

I thought it was always the case, that first, child's componentDidMount would be called, and then, parent's. However, in
讨论数 8
react
创建时间:2019-09-26 06:36:13

State not updating in realtime

I am updating state in setState() and the page is rendered correctly, but "React Developer Tools" is showing previous st
讨论数 8
react
创建时间:2019-09-25 12:32:56

Problem with updating component state in the "Components" tab of React Developer Tools - Chrome extension

Hello everyone, I have a problem with Chrome extension - React Developer Tools, if I change component's state it's not c
讨论数 2
react
创建时间:2019-09-25 12:13:45