Hooks are addition in React.js, available from version 16.8. They let you use state and other React features without writing a class.

Let's see how React components can be refractored to use React Hook useEffect() instead of the main lifecycle methods.

---

componentDidMount()

import React, { Component, useEffect } from 'react'; 

// class component
class MyClassComponent extends Component {
    componentDidMount() {
        // YOUR CODE BLOCK
    }

    render() { return <div>Something</div>; }
}; 

//the same logic but with the functional component using a hook
const MyFunctionComponent = () => {
    useEffect(() => {
        // your code block
    }, []); // now on the empty arraye here!!
    return <div>Something</div>; 
};

componentDidUpdate()

import React, { Component, useEffect } from 'react'; 

// Class component
class MyClassComponent extends Component {
    componentDidUpdate() {
        // here we catch an every update
    }
    render() { return <div>Something</div>; }
}; 

// the same logic but with the functional component using a hook

const MyFunctionalComponent = () => {
    useEffect(() => {
        // also catch all updates
    }); // there us no array here!

    return <div>Something</div>; 
}

componentDidUpdate(props)

import React, { Component, useEffect } from 'react'; 

// Class component
class MyClassComponent extends Component {
    componentDidUpdate(prevProps) {
        if ( this.props.foo !== prevProps.foo) {
            // catch only change of the 'foo' property
        }
    }

    render() { return <div>Something</div>; }
}; 

// the same logic but with the function component using a hook
const MyFunctionalComponent = ({ foo }) => {
    useEffect(() => {
        // also catch only change of the `foo` prop
    }, [foo]); // array contains list of props we catch

    return <div>Something</div>; 
}

componentWillUnmount()

import React, { Component, useEffect } from 'react'; 

// Class component
class MyClassComponent extends Component {
    componentWillUnmount() {
        // do something when the component is unmounted
    }

    render() { return <div>Something</div>; }
}; 

// The same logic but with the functional component using a hook

const MyFunctionalComponent = ({ foo }) => {
    useEffect(() {
        return() => { // return a function!
          // code here is also running only on mount
        }
    }, []); // no matter if the array is there or not

    return <div>Something</div>; 
};

---

Removal.AI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.

• ✅ Drag & Drop Multiple Images
• ✅ Optimize Product Images
• ✅ Select Your Background
• ✅ Set Your Output Size
• ✅ Exceptional Results

Visit -> Removal AI