Photo by Pineapple Supply Co. on Unsplash

React Native Notes 19: React Hooks Lifecycles Equivalents

React Hooks rule them all!

Here are the lifecycle methods for React Hooks :O

ComponentDidMount:

Code:

// Class
componentDidMount() {
    console.log('componentDidMount');
}
// React Hooks: componentDidMount
useEffect(() => {
    console.log('React Hooks: componentDidMount');
}, [])

Gist:

ComponentWillUnmount:

Code:

// Class
componentWillUnmount() {
    console.log('componentWillUnmount');
}
// React Hooks: componentWillUnmount
useEffect(() => {
    return () => console.log('React Hooks: componentWillUnmount');
}, [])

Gist:

ComponentWillReceiveProps:

Code:

// Class
componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data) {
        console.log('Prop Received: ', nextProps.data);
    }
}
// React Hooks: componentWillReceiveProps
useEffect(() => {
    console.log('Prop Received: ', props.data);
}, [props.data])

Gist:

ComponentDidUpdate:

Code:

// Class
componentDidUpdate() {
    console.log('componentDidUpdate');
}
// React Hooks: componentDidUpdate
useEffect(() => {
    console.log('React Hooks: componentDidUpdate');
})

Gist:

If you have any question, ask me :)

Have fun!