What you now basically did is an antipattern. Because your example gets quite messy if the outer state gets updated and the component should render the new value. I mean even react itself acknowledges the problem.
https://react.dev/learn/you-might-not-need-an-effect#updatin...
It’s basically that useEffect gets overused because the state hook is such a bad api.
It's not. Try some inputs in Figma or basically any numeric input:
- Focus an Input that only accepts numerical values
- Enter some non-numeric text
- Focus back out
My pattern is fairly common when you pay attention to it.
I'm not arguing that you should always use it; that's why I didn't replicate OP’s example. It’s just a demonstration that most cases have a solution that describes the intention more accurately than a dependency array.
The remaining cases can be solved by the workaround from react.dev or a userland alternative.
Well what you did will often not stay as is and at least evolve into the antipattern (update the input from outside) the only alternative would be to create a new key to do that. And trust me there is a lot of useeffect Code which is not a good idea