避免组件在 state 用钩子更改时重新渲染

Question

I have a Layout component, which has a Table component, with a component Entry for each row.

Each row can be selected, so later with a button I can send all the entries to a REST service, so each time a row is selected I add it to my state.

But each time the state changes, my Layout component renders, rendering each entry of the table, that makes me lost lots of performance and time.

Is there a way to avoid rerendering the component? I'm trying to avoid using class components.

This function triggers the rendering...

 const checkBoxHandler = (index) => {
    
    
    const actualSelectedCheck = checks[index]

    if(!selectedChecks.includes(actualSelectedCheck)){
        setSelectedChecks(selectedChecks.concat(actualSelectedCheck))
    } else {
        const newSelectedChecks = selectedChecks.slice();
        const indexOfSelected = selectedChecks.indexOf(actualSelectedCheck)
        newSelectedChecks.splice(indexOfSelected, 1);
        setSelectedChecks(newSelectedChecks);
    }

}

Why am I using the selected checks as a state? Because the rest service's button only renders when there are 1 or more selected checks.

---

Mi layout component which is rerendering...

const fixedModal = (selectedChecks.length === 0) ? null : <RescueAdminModal selectedChecksLength={selectedChecks.length}/>;

const table =
(error === null) ? 
   (loading) ? <Spinner />
   : <RATable checkboxHandler={checkBoxHandler} checks={checks} /> : null;


return(
        <Aux>
            <div className="mb-2">Filtros por estado</div>
            <RAStates changeStateHandler={stateHandler} />
            {table}
            {fixedModal}
            <div style={{height:'6rem'}} />
        </Aux>
    )

My table component;

 const RATable = (props) => {

  const classes = useStyles();

  return (
    <TableContainer style={{overflowX: "initial"}} className='my-5' component={Paper}>
      <Table stickyHeader className={classes.table} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell align="center"><b>Fecha de presentación</b></TableCell>
            <TableCell align="center"><b>Bco. emisor</b></TableCell>
            <TableCell align="center"><b>Nro. Cheque</b></TableCell>
            <TableCell align="center"><b>Cta. emisora</b></TableCell>
            <TableCell align="center"><b>Importe</b></TableCell>
            <TableCell align="center"><b>Suc. Recep.</b></TableCell>
            <TableCell align="center"><b>Nro. Boleta</b></TableCell>
            <TableCell align="center"><b>Operatoria</b></TableCell>
            <TableCell align="center"><b>Fecha Rescate</b></TableCell>
            <TableCell align="center"><b>Estado</b></TableCell>
            <TableCell align="center"><b>Fec. Ingreso</b></TableCell>
            <TableCell align="center"></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.checks.map((check, index) => <RACheckEntry checkboxHandler={props.checkboxHandler} check={check} index={index+"nico"}/>)}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

My entry component;

const RACheckEntry = (props) => {
    console.log("render checkentry")
    const toggleCheckBox = () => props.checkboxHandler(props.index);

    return(
        <TableRow key={props.index}>
            <TableCell align="center" component="th" scope="row">
                {props.check.fecPresentacion}
            </TableCell>
            <TableCell align="right">{props.check.bcoEmis}</TableCell>
            <TableCell align="right">{props.check.nroCheque}</TableCell>
            <TableCell align="right">{props.check.ctaEmisora}</TableCell>
            <TableCell align="right">{props.check.importe}</TableCell>
            <TableCell align="right">{props.check.sucRecep}</TableCell>
            <TableCell align="right">{props.check.nroBoleta}</TableCell>
            <TableCell align="right">{props.check.oper}</TableCell>
            <TableCell align="right">{props.check.fechaRescate}</TableCell>
            <TableCell align="right">{props.check.estado}</TableCell>
            <TableCell align="right">{props.check.fecIngreso}</TableCell>
            {(props.check.estado === A_RESCATAR) ? <Checkbox onChange={() => toggleCheckBox(props.index)} color="primary"/> : null}
        </TableRow>
          
    )

---

EDIT after Nadia's comment:

const checkBoxHandler = React.useCallback(index => {
    
    
    const actualSelectedCheck = checks[index]

    if(!selectedChecks.includes(actualSelectedCheck)){
        setSelectedChecks(selectedChecks.concat(actualSelectedCheck))
    } else {
        const newSelectedChecks = selectedChecks.slice();
        const indexOfSelected = selectedChecks.indexOf(actualSelectedCheck)
        newSelectedChecks.splice(indexOfSelected, 1);
        setSelectedChecks(newSelectedChecks);
    }

}, []);

Answer 1

If you wrap RACheckEntry in React.memo ( RACheckEntry =React.memo((props) => {..}) ) React will only re-render it when props change, however one of you props is a method checkboxHandler , I don't see where you define it, but if it is defined inside a functional component, it'll be re-created on each render, making memo useless. To avoid this problem React provides useCallback hook, if you define your handler with it it'll stay the same between renders ( const checkboxHandler= useCallback(() => {...},[] ).

Someone had a similar problem with a different table and it seems it work for them react-table is extremely slow with react-select: how to speed it up?

Update: move all manipulations with state inside setSelectedChecks callback, so you don't depend on the current state inside checkBoxHandler

const checkBoxHandler = React.useCallback(index => {

setSelectedChecks(selectedChecks => {
const actualSelectedCheck = checks[index]

if(!selectedChecks.includes(actualSelectedCheck)){
    return selectedChecks.concat(actualSelectedCheck)
} else {
    const newSelectedChecks = selectedChecks.slice();
    const indexOfSelected = selectedChecks.indexOf(actualSelectedCheck)
    newSelectedChecks.splice(indexOfSelected, 1);
    return newSelectedChecks;
}})
}, [checks]);

here's a simplified version of it https://codesandbox.io/s/trusting-franklin-euzn7?file=/src/App.js

Update 2:

The reason why it didn't work initially is a combination of two factors: JavaScript closure and React immutable state. When a JavaScript function is created it is enclosed with the surrounding state (basically the viable names are replaced with the actual addresses in memory). But then, when you set state in React, you don't modify existing objects in memory, you create brand new ones. This means that checkboxHandler created in the first render is stuck with two empty arrays, with no way to know where current state is in memory.

To solve this problem you can either pass checks and selectedChecks as parameters to checkboxHandler or add them as dependencies to useCallback . In the later case React with re-create checkboxHandler each time one of the dependencies changed. Now, checks are fine as they are only updated once and this will result in updating all entries anyways. But if you add selectedChecks as a dependency, checkboxHandler will be recreated each time selectedChecks are updated, which defeats the puprose. Luckily although checkboxHandler has no idea where to get current state, React provides a way to access it via set state callback. If you move the logic from checkboxHandler to the callback there is no need for checkboxHandler to capture selectedChecks . So we are moving from

1. checkBoxHandler calculates new state based on selectedChecks captured at the moment of checkBoxHandler creation
2. checkBoxHandler passes new state to React

to

1. checkBoxHandler passes a method to React
2. React passes current state to that method
3. the method calculates new state based on the fresh state and passes it to React