React: how to maintain performance when updating a large parent record from a controlled child input field?

Asked
Active3 hr before
Viewed126 times

9 Answers

controlledinputreact
90%

I want to use controlled input fields in the child (line item) component. However, this means, at least naively, that every keypress results in a state update in the parent (bill) component, and some re-renders, even if I use React.memo judiciously.,I'm maintaining the state of the bill (and its line items) in the parent component, which feels right.,Find centralized, trusted content and collaborate around the technologies you use most.

I think your issue actually is that you're recreating updateBill every time this component re-renders, meaning every single child component will also re-render because they all receive updateBill as a prop. Consider using useCallback to memoize the updateBill function:

const updateBill = useCallback(updatedLineItem => {
   setBill(bill => {
      const newLineItems = [...bill.lineItems];
      newLineItems[updatedLineItem.index] = updatedLineItem;
      return {
         ...bill,
         lineItems: newLineItems
      }
   })
}, []);
88%

React.PureComponent is a base component class that checks the fields of state and props to know whether the component should be updated.,Just like what shouldComponentUpdate does to class components, so also React.PureComponent.,See, we used the shouldComponentUpdate method to set when our component will be re-rendered effectively boosting the performance of our component.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Additionally, it renders the BoilingVerdict for the current input value.,Uncontrolled Components,Passing Functions to Components

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;  }
  return <p>The water would not boil.</p>;}
load more v
65%

Recently I was given a privilege to spend a whole two weeks, freestyle, on hunting down performance issues in a large-scale React Native app. There were a few good starting points that the QA team had suggested — some of the screens had a disturbingly slow reaction to such simple actions as tapping on a checkbox or typing a text into an input.,What my surprise was when I saw an issue on Github with a complaint on a very similar arrow function to those we examined before, forgotten in the depths of React Native.,Let’s call such props evernew. Oh, this is a wide-spread and very annoying pest in React apps. Before I make the point, let’s revisit the concept of shallow equality between objects.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

React Hook Form is based on Uncontrolled Components, which gives you the ability to build an accessible custom form easily.,Being that React Hook Form relies on uncontrolled components, you can specify a defaultValue or defaultChecked to an individual field. However, it is more common to initialize a form by passing defaultValues to useForm.,Note: Because ref has not been registered, React Hook Form won't be able to register event listeners to the inputs. This means you will have to manually update value and error.

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">First name</label>
      <input
        id="firstName"
        aria-invalid={errors.firstName ? "true" : "false"}
        {...register('firstName', { required: true })}
      />
      {errors.firstName && (
        <span role="alert">
          This field is required
        </span>
      )}

      <input type="submit" />
    </form>
  );
}
load more v
40%

The props.children property allows you to inject components inside other components.,The component needs to output props.children in its JSX:,Inside a component JSX you can render {this.props.children} which automatically injects any JSX passed in the parent component as a children:

Pretag
 Pretag team - issue, fix, solve, resolve
22%

selector is the function you defined on your column.selector. We're going to call this function and pass in the row data in the example below.,Refer to themes.js for properties you can use to create your own color theme.,But that only works if you don't need to pass component props/methods to the column object. For example what if you want to attach an event handler to a button in the row using column.cell?

Co-authored-by: John Greenwood <john@greenwoodlomax.com>
load more v
60%

'search' - Used when the text field element should also be treated as a search field.,'link' - Used when the element should be treated as a link.,'button' - Used when the element should be treated as a button.

.box - none {
   pointer - events: none;
}.box - none * {
   pointer - events: auto;
}
load more v
48%

But often there's not a single bottleneck. Often the problem is that every user interaction triggers every component to re-render which is the performance bottleneck. I've had countless people ask me about this problem. Memoization won't help them because these form field components accept props that are indeed changing.,Let's try the React DevTools profiler and observe what React is doing when we interact with one of the form fields like that.,The PENALTY is used in our <Penalty /> component which each of the fields renders to simulate a component that takes a bit of extra time to render:

Pretag
 Pretag team - issue, fix, solve, resolve

Other "controlled-input" queries related to "React: how to maintain performance when updating a large parent record from a controlled child input field?"