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

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);