React - Using useMemo() still causes keyboard input to slow down

Question

I have this code, which has many input boxes, each input box is used to modify a price value. Since there are a lot of input boxes (3 prices per area and 3 pricing per price), to avoid re-rendering everything every time, I used useMemo on the function that updates the input box value, and in addition to In addition, I also used useReducer to avoid the code being too long to control the input box.

However, entering characters (or numbers) is not displayed instantly, but takes a short period of time to be displayed, let alone continuous input.

const handleUpdate = useMemo(
    () => (property, valu, obid) => {
      dispatch({ type: "UPDATE_DATA", property, payload: valu, id: obid });
    },
    [dispatch]
  );

And there is also a reducer:

function reducer(state, action) {
    switch (action.type) {
...
case "UPDATE_DATA":
        return {
          ...state,
          data: state.data.map((item) => {
            if (item.id === action.id) {
              return { ...item, [action.property]: action.payload };
            }
            return item;
          }),
        };
}
}

I recommend checking the entire code, as the problem (or solution) may lie elsewhere. In order to view the entire code you can refer to this sandcodebox link. Please forgive me for copying part of the code, which resulted in poor css format. Note that the fetch function has been replaced by a long array of simulated data.

Link: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js

Answer 1

Typically, useMemo is used to cache expensively calculated values ​​during rendering. In your case, however, you don't have any expensive rendering calculations; you just render a very large tree every time the input changes. In fact, because all state is on the App component, the entire app is re-rendered every time.

The way to optimize this problem in React is to skip rendering components as much as possible. To do this, split unrelated parts of the page into different components. Once the logic is separated, wrap it with React.memo(), which is a different optimization technique that can skip component rendering entirely.

To me, the most obvious changes you can make are:

1. Move TodosDatos out of the App component as it is a constant and does not need to be redefined on every render (which may take up memory).
2. Put your <Table> into a new component and use React.memo() to memoize it. Make sure to pass all table dependency values ​​to the new component's props.

I implemented these changes here: https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js. You should now notice that typing is almost instantaneous. You can also do multiple optimizations elsewhere to get better performance.