Laggy TextField Updates in React

Question

I'm relatively new to react and am having a little trouble understanding passing props/states from a child to parent component. I've managed to implement something that works but it is extremely laggy.

Overview: I am trying to create a form with multiple Material UI TextFields, with a submission button at the end to submit the form.

My approach: I am using state to update individual textfields on their inputs, and then dynamically updating another state in the parent FormSection file. Once the user clicks on the 'Submit' Button (not implemented yet), it will then take all the states from the parent class.

Existing Classes:

1. CompanyField.js
2. JobTitle.js
3. FormSection.js (Main File)

Implementation Appearance

CompanyField Class (will be same for Job Title, etc):

const Root = styled('div')(({ theme }) => ({
}));

class CompanyField extends React.Component {

  state = { company: '' }

  handleOnChange = (event) => {
    event.preventDefault();
    this.setState({ company: event.target.value.toLowerCase() });

    this.props.onCompanyChange(this.state.company);
  }

  render() {
    return (
      <Root>
        <Box
          noValidate
          autoComplete="off"
        >
            <TextField
              id = "outlined-basic" 
              label = "Company" 
              variant = "outlined"
              fullWidth

              value = {this.state.company}
              onChange = { this.handleOnChange }
            />
        </Box>
      </Root>
    );
  }
}

export default CompanyField;

Index Class

class FormSection extends React.Component {

  state = { company: '', jobTitle: '' }

  onCompanyUpdate = (value) => {
    this.setState({company: value})
    // console.log('Company:', this.state.company);

  }

  render() {
    return (
          <FormContainer>
            <FormContentHeaderWrapper>
              <FormContentHeader>
                  Company & Job Information
              </FormContentHeader>
            </FormContentHeaderWrapper>

             <FormWrapperFull>
               <CompanyField onCompanyChange={ this.onCompanyUpdate } />
               <JobTitleField onJobTitleChange={ this.onJobTitleUpdate } />
             </FormWrapperFull>
           </FormContainer>
    )
}

Could someone explain whether I am doing this the correct way? Else, would there be a better way to resolve this state passing method?

Thanks in advance!

Answer 1

When you update the parent component the whole tree re-renders on every keystroke. In your case your component very small it should not be a big impact. There are three approaches in my mind.

first of all, you have to use react developer tools for investigating further re-renders and finding the real problem.

first: You might use form validation libraries. For example; "react hook forms"

second: You might use React's "React.memo" function to memorize components.

third: You might use refs for input value management. You add values to ref and when you need them you iterate that ref object. You don't update the state. If there is no state update there will be no rerender.

for example: In parent component:

const values = useRef({description: "", jobtitle: ""});

const onChange(name, value) {
  values.current[name] = value;
}

In child component: (it must be an "uncontrolled component")

const handleCompanyChange = (evt) => {
  const value = evt.target.value;
  const name = "company";
  props.onChange(name, value);
}