16 Apr 2022

[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



Mohamed Atef

16 Apr 2022


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


16 Apr 2022

Ironic, I use Formik in my case !


  const formik = useFormik({

    initialValues: {




    onSubmit: (values) => {

      cancelForm.current = false;


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





export function yyy({


}) {




    "%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


16 Apr 2022

it seems in devtool there is one option: 

but do you know how to use it?

© 2024 Copyrights reserved for