user image

nico
Published in : 2022-04-16

[React] How to know which state was updated when a render is triggered in a function component ?

React js

Hello, all i noticed that my component was rendered three times when I update an input in my form.

It is not good and feel like a performance problem.

So my question is : when a component is rendered, how can we know what state was updated when the function component is rendered?

That way I will try to optimize the code so the function component is rendered only once when I update the input of the form.

Thanks for your help

 

Comments

Mohamed Atef Date : 2022-04-16

Best answers

46

Best answers

46

I prefer to use Formik for Reactjs forms it's away better than using states and updating states on input change 

nico Date : 2022-04-16

Best answers

4

Best answers

4

Ironic, I use Formik in my case !

 

  const formik = useFormik({

    initialValues: {

      xxx

    },

    validate,

    onSubmit: (values) => {

      cancelForm.current = false;

 

      onPostData("/xxxx/Add", values);

 

      formik.handleReset();

    },

  });

export function yyy({

 xxx

}) {

  …


 

  console.log(

    "%c xxx called",

    "background: blue; color: #FFF"

  );

I see the call %c xxx called" 3 times each time I update one input…

so it seems overkill

nico Date : 2022-04-16

Best answers

4

Best answers

4

it seems in devtool there is one option: 

but do you know how to use it?

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

[solved] useEffect is repeating the request Reactjs
Publish date: 2022-04-07 | Comments: 2

Tag: React js

import link as router link from 'react-router-dom' Reactjs
Publish date: 2021-09-30 | Comments: 3

Tag: React js

Module not found: Can't resolve 'swiper' in Reactjs [Solved]
Publish date: 2021-10-03 | Comments: 1

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

[solved] Reactjs is not updating the props
Publish date: 2022-02-04 | Comments: 2

Tag: React js

useStyles Invalid hook call class component
Publish date: 2022-02-10 | Comments: 2

Tag: React js

React Redux : Connect is not called
Publish date: 2022-03-02 | Comments: 1

Tag: React js

Unexpected mix of '&&' and '||' Reactjs
Publish date: 2021-10-30 | Comments: 0

Tag: React js