[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

16 Apr 2022

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

nico

16 Apr 2022

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

16 Apr 2022

it seems in devtool there is one option:

but do you know how to use it?