3 ms·

Can someone explain the types of bugs and pitfalls one ends up having when using componentWillMount, componentWillReceiveProps, and componentWillUpdate?

danabramov 9y ago
Race conditions and memory leaks are pretty common. Side effects that wouldn't be safe to repeat (which is what happens with async rendering). There is also sometimes a reliance on these methods happening synchronously (which again wouldn't work with async rendering).
Blackstone4 9y ago
Taken from my comment above: "When I first started using React, I kept trying to use componentWillMount, componentWillReceiveProps, and componentWillUpdate... I kept getting stuck in infinite loops... new prop updates state which re-renders the component which means "new props" updates state which re-renders component etc. Or something like that...." I didn't really understand how React worked underneath and I thought these functions would be helpful. But they weren't...
brianvaughn 9y ago
The RFC for getDerivedStateFromProps (https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#common-problems https://github.com/reactjs/rfcs/blob/master/text/0006-static...) mentions a few! • Initializing Flux stores in componentWillMount. It's often unclear whether this is an actual problem or just a potential one (eg if the store or its dependencies change in the future). Because of this uncertainty, it should be avoided. • Adding event listeners/subscriptions in componentWillMount and removing them in componentWillUnmount. This causes leaks if the initial render is interrupted (or errors) before completion. • Non-idempotent external function calls during componentWillMount, componentWillUpdate, componentWillReceiveProps, or render (eg registering callbacks that may be invoked multiple times, initializing or configuring shared controllers in such a way as to trigger invariants, etc.) Edit: For formatting

danabramov 9y ago

Race conditions and memory leaks are pretty common. Side effects that wouldn't be safe to repeat (which is what happens with async rendering). There is also sometimes a reliance on these methods happening synchronously (which again wouldn't work with async rendering).

Blackstone4 9y ago

Taken from my comment above: "When I first started using React, I kept trying to use componentWillMount, componentWillReceiveProps, and componentWillUpdate... I kept getting stuck in infinite loops... new prop updates state which re-renders the component which means "new props" updates state which re-renders component etc. Or something like that...." I didn't really understand how React worked underneath and I thought these functions would be helpful. But they weren't...

brianvaughn 9y ago

The RFC for getDerivedStateFromProps (https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#common-problems https://github.com/reactjs/rfcs/blob/master/text/0006-static...) mentions a few! • Initializing Flux stores in componentWillMount. It's often unclear whether this is an actual problem or just a potential one (eg if the store or its dependencies change in the future). Because of this uncertainty, it should be avoided. • Adding event listeners/subscriptions in componentWillMount and removing them in componentWillUnmount. This causes leaks if the initial render is interrupted (or errors) before completion. • Non-idempotent external function calls during componentWillMount, componentWillUpdate, componentWillReceiveProps, or render (eg registering callbacks that may be invoked multiple times, initializing or configuring shared controllers in such a way as to trigger invariants, etc.) Edit: For formatting