Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 28, 2021 12:10 am GMT

Component Lifecycle In React Functional Components

Using Functional Components in react become the most popular way to create react Components, sometimes I feel like I want to use a
class component lifecycle functions but still want to get benefits from react hooks

it is simple tutorial about how to use useEffect hook as lifecycle functions in react.

lets start with the most simple one componentDidMount()

you can create it easily

    useEffect(function componentDidMount(){        console.log("%c componetDidMount","color:green;")    }, [])

to add componentWillMount() just add it as returned function for componentDidMount() Like

    useEffect(function componentDidMount(){        console.log("%c componetDidMount","color:green;")        return function componentWillUnmount(){            console.log("%c componetWillUnmount", "color:red")        }    }, [])

the next one will be a compine between componentDidMount() and componentWillMount()
it will be componentDidMountAndCompontDidUpdate() yeah it is not from react lifecycle component but will help to understand useEffect

    useEffect(function componentDidMountAndCompontDidUpdate(){        console.log("%c componentDidMountAndCompontDidUpdate","color:teal;")    })

this function with no deps array will run twice in the rendering of the component. it will run at mount and after this it will run at update, This component will run every time after any state change.

The remaining Function is componetDidUpdate() to build a componentDidUpdate you need to create mounted flag.
run function only in componet update and ignore run in componet mount

    const mounted = useRef()    useEffect(function runComponentDidUpdate(){        if(!isComponetMounted()){            return         }        (function componentDidUpdate(){            console.log("%c CompontDidUpdateForAnyVariable", "color:orange;")        })()    });    useEffect(function lastUseEffect(){        signComponetAsMounted()    }, [])    function signComponetAsMounted(){        mounted.current = true    }    function isComponetMounted(){        if (!mounted.current) {            return false        }        return true    }

The whole code.

import React, { useEffect, useRef, useState } from "react";function FuctionComponentLifeCycle(){    const mounted = useRef()    const [count, setCount] = useState(0)    useEffect(function componentDidMount(){        console.log("%c componetDidMount","color:green;")        return function componentWillUnmount(){            console.log("%c componetWillUnmount", "color:red")        }    }, [])    useEffect(function componentDidMountAndCompontDidUpdate(){        console.log("%c componentDidMountAndCompontDidUpdate","color:teal;")    })    useEffect(function ComponentDidUpdateForCount(){        console.log("%c CompontDidUpdateForCount", "color:blue;")    }, [count])    useEffect(function runComponentDidUpdate(){        if(!isComponetMounted()){            return         }        (function componentDidUpdate(){            console.log("%c CompontDidUpdateForAnyVariable", "color:orange;")        })()    });    useEffect(function lastUseEffect(){        signComponetAsMounted()    }, [])    function signComponetAsMounted(){        mounted.current = true    }    function isComponetMounted(){        if (!mounted.current) {            return false        }        return true    }    return (    <div>        Component Rendered        <div className="">            {count}        </div>        <button onClick={()=>setCount(count=> count + 1 )}> Add 1</button>    </div>    )}export default FuctionComponentLifeCycle;

Thanks for reading.


Original Link: https://dev.to/mohamedfarids/component-lifecycle-in-react-functional-components-4p5h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To