Trigger component render from different component without rendering the whole page

user_18352930 0
Viewed 63

In my project I have a Page component, for adding items, and then show them in Navigation panel:

import React, { useState } from 'react'

const Page = ({setRefreshList}) => {
  console.log("PAGE RENDER");
  const addItem = () => {
    // adding item to database
    setRefreshList();
  }

  return (
    <button onClick={addItem}>Add Item</button>
  )
}

Navigation component, with site menu and items:

const Navigation = () => {
  console.log("Navigation RENDER");
  return (
    <div>
    List of all items:
    </div>
  )
}

Some more components in the page, like Header:

const Header = () => {
  console.log("HEADER RENDER");
  return (
    <div>
    HEADER
    </div>
  )
}

And main App:

export function App(props) {
  const [refreshList, setRefreshList] = useState(0);

  return (
    <div className='App'>
    <Header />
    <Navigation />
    <Page setRefreshList={setRefreshList} />
    </div>
  );
}

I need to refresh Navigation component every time item added in Page, so I used setState. Now everytime the state changes, it renders all other components as well.

I tried to use React.memo() but it has no effect here because props contains a function. And combining Page and Navigation isn't an option, because in the full project they are separate.

Link to online code editor with the example: https://playcode.io/953730/.

reactjs javascript
2 Answers

"I tried to use React.memo but it has no effect here because props contains function", well there is a hook for this kind of use cases, called useCallback, that you can use like this: 

const Page = React.memo(({ setRefreshList }) => {
  console.log("PAGE RENDER");
  const addItem = React.useCallback(() => {
    // adding item to database
    setRefreshList(Math.random());
  }, []);

  return <button onClick={addItem}>Add Item</button>;
});

const Navigation = () => {
  console.log("Navigation RENDER");
  return <div>List of all items:</div>;
};

const Header = React.memo(() => {
  console.log("HEADER RENDER");
  return <div>HEADER</div>;
});

function App(props) {
  const [refreshList, setRefreshList] = React.useState(0);

  return (
    <div className="App">
      <Header />
      <Navigation />
      <Page setRefreshList={setRefreshList} />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

user_152886410

In your simplified example you can just update key property and force React to re-render Navigation component.

function App(props) {
  const [refreshList, setRefreshList] = React.useState(0);

  return (
    <div className="App">
      <Header />
      <Navigation key={refreshList} />
      <Page setRefreshList={setRefreshList} />
    </div>
  );
}

You can also use a global React context and have both Page and Navigation sharing refreshList via the context.

user_8241670
Related