How to prevent rerender when using react functional components

Question

I am exceeding my API uses due to the fact that everytime I change tabs on my site it makes a refreshes and makes all the API Calls over again. All the code provided is the component for the tabs, everything works properly just trying to prevent the refresh on tab switches. Is there any way to prevent this?

    import React, { useEffect, useState } from 'react';
    import PropTypes from 'prop-types';
    import { makeStyles } from '@material-ui/core/styles';
    import AppBar from '@material-ui/core/AppBar';
    import Tabs from '@material-ui/core/Tabs';
    import Tab from '@material-ui/core/Tab';
    import Typography from '@material-ui/core/Typography';
    import Box from '@material-ui/core/Box';
    import Container from '@material-ui/core/Container';

    import API from "../../utils/API"
    import Players from "../Players/index"


    function TabPanel(props) {
        const { children, value, index, ...other } = props;

        return (
            
                {value === index && (
                    
                        {children}
                    
                )}
            
        );
    }

    TabPanel.propTypes = {
        children: PropTypes.node,
        index: PropTypes.any.isRequired,
        value: PropTypes.any.isRequired,
    };

    function a11yProps(index) {
        return {
            id: `scrollable-force-tab-${index}`,
            'aria-controls': `scrollable-force-tabpanel-${index}`,
        };
    }

    const useStyles = makeStyles((theme) => ({
        root: {
            flexGrow: 1,
            width: '100%',
            backgroundColor: theme.palette.background.paper,
        },
    }));

    export default function TeamNav() {
        const classes = useStyles();
        const [value, setValue] = React.useState(0);
        const [teams, setTeams] = useState([])

        const handleChange = (event, newValue) => {
            setValue(newValue);
        };


        useEffect(() => {

            API.getAllTeams()
                .then(res => {
                    setTeams(res)
                })

        }, [])


        console.log(teams)
        return (
            
                
                    
                        

                            } {...a11yProps(0)} />

                            } {...a11yProps(1)} />

                            } {...a11yProps(2)} />

                            } {...a11yProps(3)} />

                            } {...a11yProps(4)} />

                            } {...a11yProps(5)} />

                            } {...a11yProps(6)} />

                            } {...a11yProps(7)} />

                            } {...a11yProps(8)} />

                            } {...a11yProps(9)} />

                            } {...a11yProps(10)} />

                            } {...a11yProps(11)} />

                            } {...a11yProps(12)} />

                            } {...a11yProps(13)} />

                            } {...a11yProps(14)} />

                            } {...a11yProps(15)} />

                            } {...a11yProps(16)} />

                            } {...a11yProps(17)} />

                            } {...a11yProps(18)} />

                            } {...a11yProps(19)} />

                            } {...a11yProps(20)} />

                            } {...a11yProps(21)} />

                            } {...a11yProps(22)} />

                            } {...a11yProps(23)} />

                            } {...a11yProps(24)} />

                            } {...a11yProps(25)} />

                            } {...a11yProps(26)} />

                            } {...a11yProps(27)} />

                            } {...a11yProps(28)} />

                            } {...a11yProps(29)} />

                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            
        );
    }

Christian · Accepted Answer

You could create another component (e.g. ) that does the API call and renders passing the teams as props to . Changing the active tab inside would then still re-render but not and hence not call the API.

How to prevent rerender when using react functional components

Answers (1)

Related Questions