Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Infinite loop inside Box Component

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When is send extra non props to Box component it goes to infinite loop and the app not working until browser stop the current tab.

Expected behavior 🤔

Box component should accept extra non it’s props and working properly yet.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 14.18.1 - /usr/bin/node
    Yarn: 1.22.17 - ~/projects/repository/frontend/node_modules/.bin/yarn
    npm: 6.14.2 - /usr/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 94.0
  npmPackages:
    @emotion/react: ^11.5.0 => 11.7.0 
    @emotion/styled: ^11.3.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.58 
    @mui/icons-material: ^5.0.4 => 5.2.0 
    @mui/lab: ^5.0.0-alpha.51 => 5.0.0-alpha.58 
    @mui/material: ^5.2.2 => 5.2.2 
    @mui/private-theming:  5.2.2 
    @mui/styled-engine:  5.2.0 
    @mui/styled-engine-sc: ^5.0.3 => 5.1.0 
    @mui/styles: ^5.0.1 => 5.2.2 
    @mui/system:  5.2.2 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.2 
    @types/react: ^17.0.27 => 17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.1.1 => 5.3.3 
    typescript: ^4.3.5 => 4.5.2

Issue Analytics

State:
Created 2 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

mnajdovacommented, Dec 7, 2021

Well the problem is that you are setting the onChange on two elements. In the CommonFields you are debouncing which is great, but in the Box you are not, so hence the problem. It is not related to the Box component, using simple div there would have the same effect. See https://codesandbox.io/s/angry-nash-h2pgr?file=/src/SchemaField.tsx as a prove. I would recommend restructuring the onChange and not propagating it to the Box.

1reaction

mnajdovacommented, Dec 6, 2021

It doesn’t look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve