Closed ku8ar closed 5 years ago
The reason we created the useEffect
hook (and useLayoutEffect
) rather than useDidMount
and useWillUnmount
etc. is that we found the most common use cases required handling both mount and update scenarios (not just mount or just unmount). Handling only one may often seem to work but could hide bugs if e.g. props changed.
As you've shown above, defining a useDidMount
effect in user space is also just a line or two of code, so if you find that to be a clearer API- it's pretty easy to add that to your local repo.
There seem to be some misunderstandings (or statements I disagree with) in the above conclusions:
- Writing a reusable useWillUnmountEffect hook is very difficult (probably even impossible)
I think this just illustrates why it's important to consider updates in addition to mounts and unmounts.
I also think it's very uncommon to need a will-unmount effect (essentially a side effect cleanup) without an associated side effect, which is why useEffect
(and useLayoutEffect
) do cleanup inside of their return functions. So I think a useWillUnmount
hook is probably not really useful in practical use cases. (Perhaps you can provide a few examples of when it might be.)
- Programmers typically write the code as follows: useEffect(callback, []), which causes each rerender to do shallow compare (Object.is) on dynamically created empty arrays. The proposed hooks will be more efficient.
This is not how comparison is done. If an empty array is specified, React will not do any comparison. (It is the values inside of the array that are compared, not the array itself.)
I think any proposals for new hooks (or changes to the hooks API) should really go through our RFC process to ensure that all angles have been considered. That process provides a nice template to help encourage thinking about use cases, drawbacks, alternatives, etc. and it's pretty helpful for discussion as well.
If you feel strongly about a new API like useDidMount
- I suggest you file an RFC for it!
https://github.com/reactjs/rfcs/
I'm going to close this issue for now (although we can keep talking here even after it's closed!)
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
While refactoring the code to React Hooks, I came across several "problems" that negatively affect my work. Working with Hooks should be a pleasure, but sometimes it's very hard work.
Let's start with the simplest example:
componentDidMount
. This most popular method in the component's lifecycle has no equivalent in Hooks! Of course, there isuseEffect
with which we can build similar "effect", but its syntax is NOT INTUITIVE.Let's look:
Personally, for me, every empty array, or even unnecessary brackets, are just information noise. But
useDidMountEffect
can be written very easily......so, let's get to the second case:
componentWillUnmount
.React documentation mentions that we can use
useEffect
to call a function when a component is unmounted:So let's check it out:
But as in the first example, here we can also write a custom hook:
Everything simple easy and fun? It seems so. But not completely. This custom hook forced me to write this issue, because the above code will not work at some specific moment. Probably most React Masters already guess when it won't work.
Where is the problem? Let's see:
And now try to initiate the following actions on the above code:
works like charm!
to inputReact hooks: nie
insteadReact hooks: works like charm!
What happened here? Of course, reference to the first value instead ACTUAL value...
So how can we fix this bug? Very easy xD
Yep. This is how we were able to implement logging in the console of the last value of the given component.
And now the question: which version is more readable for a beginner? This with weird refs, arrows everwhere and squares, or with small and elegant class? Personally, I think programming should be easy. Or at least strive for simplicity. And the class implementation (old) is much easier to read and understand logic.
What is the expected behavior?
New hooks:
Without any deps. In addition,
useWillUnmountEffect
get the ACTUAL context to use props or state in it.And now defense. Someone can say: if you write your own custom hooks that behave the same as the proposed solution, why not just add them to your project and forget about the case? Well:
useState
is also a hook that is a replacement for thestate
in class, so proposed hooks are analogy touseState
.useWillUnmountEffect
hook is very difficult (probably even impossible)useEffect(callback, [])
, which causes each rerender to do shallow compare (Object.is
) on dynamically created empty arrays. The proposed hooks will be more efficient.Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.8.0"