'child component without props re-renders even with react mem

there are a lot of questions related to my issue, but all deal with child components with props. I am not sending any props but the child component is still getting re-rendered which is causing useless load on the db when the getstate function runs.

When i change the sidebar state in the parent, the child re-renders. What is causing the react memo to not work? and how to memoize the chart data to avoid hitting the db everytime the sidebar changes?

 function Child() {
  const [state, setstate] = useState("")

  useEffect(() => {
    getState('addressbalance');
  },[]);

  const getState = async (urlLoc) => {
    try {
      const response = await fetch(baseURL.concat(`/${urlLoc}`));
      const jsonData = await response.json();
      setstate(jsonData);
    } catch (err) {
      console.error(err.message);
    }
  };

  const renderChart = () => {
    return <ChartApex graph='Bar' data = {state} height={'95%'} width={'100%'}/>
  }

  return (
    <Explore>
      <Card  width="90%" height='550px'>
     {renderChart()}
      </Card>
    </Explore>
  );
}
export default React.memo(Child)

Parent

<PageContainer changeSidebar={changeSidebar} sidebar={sidebar}>
 <Switch>
...
  <Route
   path="/addressbalance"
   component={() => <Child/>}
   />
  </Switch>
</PageContainer>



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source