1

The thing is i want to run some logic only when mounting and also i want to run some other logic when every render/updates. How can we achieve this using hooks in a functional component. If it was a class component i could've use componentDidMount for one time execution and componentDidUpdate for every render.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Ameen Farook
  • 21
  • 2
  • I think you can use a variation of the answer https://stackoverflow.com/a/53406363/7351882 – AnJo Jun 18 '21 at 06:04
  • Does this answer your question? [Equivalent to componentDidUpdate using React hooks](https://stackoverflow.com/questions/53255951/equivalent-to-componentdidupdate-using-react-hooks) – Vasyl Nahuliak Jun 18 '21 at 06:17
  • These are like some extra logic we adding to achieve such usecase, other than this react itself not providing other options right ? – Ameen Farook Jun 19 '21 at 09:09

3 Answers3

2

Here is a complete explanation:

Equivalent to componentDidMount

useEffect(() => {
  // same as componentDidMount
}, []);

Equivalent to componentDidMount, componentDidUpdate

useEffect(() => {
  // same as componentDidMount and componentDidUpdate
});

This will be called on change of state variable

const [message, setMessage] = useState('');
useEffect(() => {    
  // Called when value of message changes
}, [message]);
Surjeet Bhadauriya
  • 6,755
  • 3
  • 34
  • 52
  • Ok, i understood this. But what i exactly asking is consider i have 2 functions, function A and function B. Function A should only be called at once while mounting the component and at that time function B should not be called and function B should only called while component updates at that time function A should not call. How can we achieve this using useEffect hook ? – Ameen Farook Jun 19 '21 at 07:23
1

I saw the comment you had for @Surjeet Bhadauriya, there is no specific hook that handle this scenario, but you could easily have a work around this.

Here is an example

const [didMount, setDidMount] = useState(false);

useEffect(() => {
  // your code on didMount;
  setDidMount(true);

}, []);


useEffect(() => {
  if (!didMount)
    return;
  // your code on didUpdate;
});
Alen.Toma
  • 4,684
  • 2
  • 14
  • 31
  • Thanks @Alen.Toma, I also end up with this. I just want to make sure that there is no built in functionality to achieve this. – Ameen Farook Jun 22 '21 at 17:32
0
import React, { useEffect, useState } from "react";
import { Button, Typography } from '@mui/material';
const First = () => {
    const [state, setState] = useState(0);
    const [componentDidMount, setComponentDidMount] = useState(false)
    useEffect(() => {
        console.log("This is the mounting phase")
        setComponentDidMount(true);
    }, [])

    useEffect(() => {
        if (!componentDidMount) {
            return;
        }
        console.log("This will work after component re render it self due to some state change")
    },[state])
    return (
        <>
            <Typography variant="h1">Start</Typography>
            <Button onClick={() => {
                setState(state + 1);
            }} color="secondary" variant="contained">Click {state}</Button>
            {
                console.log("Component Renders")
            }
        </>
    );
};
export default First;
Vikram Singh
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 17 '23 at 17:35