I have a react application which uses Material UI v5. I do not have any styling and am using the default TextField component to test the rendering issue. In my page, I have only a Typography, Breadcrumb, IconButton and TextField. To replicate the issue, I have put one controlled TextField and about six other uncontrolled TextFields. When I start writing on the controlled TextField, all the components inside page starts re-rendering. And if I start typing a lot/faster, it sometimes freezes or takes a while (like 500-1000ms) to render the text inside the TextField. Basically it freezes for a second or half.
Here is a replicated demo of what I have. My real project is also using create-react-app. I have the same thing in my react app and it renders everything. Here is a link to a snap taken. I used the react developer tools profilers "Highlight updates when components render" option.
My Environment details:
System:
OS: Windows 10 10.0.19043
Binaries:
Node: 14.17.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.20.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
npmPackages:
@emotion/react: ^11.4.1 => 11.4.1
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.47
@mui/icons-material: ^5.0.0 => 5.0.0
@mui/lab: ^5.0.0-alpha.47 => 5.0.0-alpha.47
@mui/material: ^5.0.0 => 5.0.0
@mui/private-theming: 5.0.0
@mui/styled-engine: 5.0.0
@mui/styled-engine-sc: ^5.0.0 => 5.0.0
@mui/styles: ^5.0.0 => 5.0.0
@mui/system: 5.0.0
@mui/types: 7.0.0
@mui/utils: 5.0.0
@types/react: 17.0.22
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
styled-components: ^5.3.1 => 5.3.1
Is this the react behavior? Can I stop re-rendering/updating of all components when one component updates its state?
React components are made using a rule called decomposition. Each component can have a father and a child (if not alone) and can be modeled as shown in this picture. React component tree
When the state is updated in the parent component, to update the screen, this component is rendered and also all the child components are rendered in it.
if you want to prevent this behavior in a class component you need to use shouldComponentUpdate you can read its doc in here and if you want to handle it in a functional component you can use useMemo hook, and you can read its doc in here
