I want to prevent re-render of child component

Question

I am using three child components in my parent that is m show under according to when I click in Accordion this child component re-render again and again when I click because of this Accordion get slow to open take time because some time data will come in a large amount I have tow child component like this and my data is not getting change I have already stored in some state before coming in this Accordion section

import React from 'react'
import {
    Box,
    makeStyles,
    Typography,
    Paper,
    Grid,
    Card,
    CardContent,
  } from "@material-ui/core";

function childComponent({data, title, classes}) {
    console.log("child rerender dataChnage")
    const Memodata = React.useMemo(() => {
        return data
     },[data]);
    return (
        <>
        <Box mt={2}>
           <Typography variant="subtitle2" noWrap={true}>
             <Box fontWeight="fontWeightBold">{title}</Box>
           </Typography>
         </Box>
         {Memodata?.map((row, rowIndex) => {
           return (
             <>
             {Memodata?.length !== 0  ? (
               <Card className={classes.cardSpace} variant="outlined">
                 <CardContent>
                   <Grid xs={12} item container spacing={2}>
                     <Grid item xs={12} sm={3}>
                       <Typography  variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           name :
                         </Box>
                         {row.SRN}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography  variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                            ID :
                         </Box>
                         {row.CHARGE_ID ? row.CHARGE_ID : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={6}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                            Holder :
                         </Box>
                         {row.CHARGE_HOLDER ? row.CHARGE_HOLDER : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Date Create :
                         </Box>
                         {row.DATE_CREATE ? row.DATE_CREATE : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Date Modified :
                         </Box>
                         {row.DATE_MODIFIED ? row.DATE_MODIFIED : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Date Satisfied :
                         </Box>
                         {row.DATE_SATISFIED ? row.DATE_SATISFIED : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12} sm={3}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Amount :
                         </Box>
                         {row.AMOUNT ? row.AMOUNT : "N/A"}
                       </Typography>
                     </Grid>
                     <Grid item xs={12}>
                       <Typography variant="subtitle2">
                         <Box fontWeight="fontWeightBold" component="span" mr={1}>
                           Address :
                         </Box>
                         {row.ADDRESS ? row.ADDRESS : "N/A"}
                       </Typography>
                     </Grid>
                   </Grid>
                 </CardContent>
               </Card>
               ) : (
                 <Typography variant="subtitle2">No Data Available.</Typography>
               )}
             </>
           );
         })}
       </>
    )
}

export default React.memo(childComponent);

Passing data in the child component

{MemoUserHistorySummary?.masterData?.map((row, i) => {
            return (
              <Accordion
                expanded={expanded === i}
                onChange={handleChange(i)}
                elevation={0}
                className={classes.bgColor}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1bh-content"
                  id="panel1bh-header"
                >
                  <Grid container direction="row">
                    <Grid item xs={12} md={6}>
                      <Grid item xs={12}>
                        <Box display="flex">
                          <Grid item xs={8} sm={4} md={3}>
                            <Box overflow="hidden" width="100%">
                              <Typography component={"div"} variant="subtitle">
                                <Box
                                  fontWeight="fontWeightBold"
                                  overflow="hidden"
                                  whiteSpace="nowrap"
                                  textOverflow="ellipsis"
                                >
                                  Name :
                                </Box>
                              </Typography>
                            </Box>
                          </Grid>
                          <Grid item xs={9} sm={8} md={9}>
                            <Typography component={"div"} variant="subtitle">
                              {row.NAME}
                            </Typography>
                          </Grid>
                        </Box>
                        <Grid item xs={12}>
                          <Typography variant="subtitle">
                            <Box display="flex" flexWrap="wrap">
                              <Box mr={1} fontWeight="fontWeightBold">
                                ID :
                              </Box>
                              {row.ID}
                            </Box>
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                    <Grid container item xs={12} md={6}>
                      <Grid item xs={2}>
                        <Box overflow="hidden" width="100%">
                          <Typography component={"div"} variant="subtitle">
                            <Box
                              fontWeight="fontWeightBold"
                              overflow="hidden"
                              whiteSpace="nowrap"
                              textOverflow="ellipsis"
                            >
                              Address :
                            </Box>
                          </Typography>
                        </Box>
                      </Grid>
                      <Grid item xs={10}>
                        <Box display="flex">
                          <Typography
                            component={"div"}
                            variant="subtitle"
                            title={row.REGISTERED_OFFICE_ADDRESS}
                          >
                            {row.REGISTERED_OFFICE_ADDRESS.slice(0, 110)}
                          </Typography>
                        </Box>
                      </Grid>
                    </Grid>
                  </Grid>
                </AccordionSummary>
                <AccordionDetails>
                  <Grid item xs={12}>
                    <DetailsCards
                      companyName="Name"
                      row={row}
                      mainDetailData={corporateCells}
                      show={show}
                      setShow={setShow}
                    />
                     <DownloadsChargesCard
                      data={MemoUserHistorySummary?.charges}
                      title={"Charges Registered"}
                      cells={chargesCells}
                      classes={classes}
                    />

                    <DownloadDiractorCard
                      data={MemoUserHistorySummary?.directors_history}
                      title={"Directors List"}
                      cells={signatoriesCells}
                      classes={classes}
                    />
                  </Grid>
                </AccordionDetails>
              </Accordion>
            );
          })}

Answer 1

You basically need to implement shouldComponentUpdate() on the children components and have it return false when the state or prop that causes the parent accordion to expand is the only value in nextProps or nextState (depending how you are controlling your accordion, which I couldn't tell from your code sample).