react onChange on text field update whole component when state is changed - reactjs

Question

I had a functional component and using react hooks to manage the state.
As soon as I add onChange in textField(input in material UI) the whole components re-render and when I remove the onChange in textField it does not re-render
<TextField
id='outlined-basic'
label='Outlined'
variant='outlined'
fullWidth
onChange={e => {
setChannelUrl(e.target.value);
}}
/>
The above picture is of component is rerender even I am not passing any props.
As soon as I remove setChannelUrl(e.target.value); everythng works like fine.
setChannelUrl is react useState Hooks
const [channelUrl, setChannelUrl] = useState('');
useEffect(() => {
console.log('runnedddd');
return () => {};
}, []);
const classes = useStyle();
return (
<Grid container spacing={2} className={classes.root}>
<Grid item md={6}>
<Typography variant='h6' color='primary' className={classes.button}>
Please Enter Your Channel Url
</Typography>
<TextField
id='outlined-basic'
label='Outlined'
variant='outlined'
fullWidth
onChange={e => {
setChannelUrl(e.target.value);
}}
/>
<Button fullWidth color='primary' variant='contained'>
large
</Button>
</Grid>
<Grid item md={6}>
<Paper elevation={2} className={`flex flexColumn ${classes.w100}`}>
<Avatar alt='Remy Sharp' src=''>
H
</Avatar>
<Typography variant='body' align='center'>
Hitesh Choudary
</Typography>
<Button
fullWidth
color='primary'
variant='contained'
className={classes.button}
>
Save It
</Button>
<Button
fullWidth
color='secondary'
variant='contained'
className={classes.button}
>
No, its not mine
</Button>
<Stats />
</Paper>
</Grid>
</Grid>
);
};
stats component
import React from 'react';
const Stats = props => {
console.log(props);
return <div></div>;
};
export default Stats;
I am using functional component and arrow function

Answer 1

Stats component renders duo to its parent render.
The parent renders when users typing in text field and onChange updates the stated through setChannelUrl.
You can memoize Stats with React.memo which will prevent the undesired renders:
If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
const Stats = () => {
// Won't log on parent render
console.log('rendered');
return <div></div>;
};
export default React.memo(Stats);