React.memo with react-router-dom useLocation()

Question

Recently I found some performance issue with my React app, and after some research i discovered React Memo. Some training examples worked as excepted, but when connect it into my app it does not have any effect. I found that problem is with useLocation.

const Table = React.memo(() => {
 
    const location = useLocation();

    return <div>something</div>
    
},(prevProps, nextProps) => {
    return true //I dont want re-render this Component when parent component is re-rendered
})

Without useLocation it workes, but I need this location, because based on this location, more specifically based on filters from this location i call API data. Something like

const location = useLocation();
  useEffect(() => {
    dispatch(getData(location.search))
}, [location]);

Have someone better solution or some tips?

score 3 · Accepted Answer · answered Aug 13 '21 at 23:20

The solution around this would be to create a wrapper that passes location in as a prop. Doing so will make table a pure component and will only rerender when location changes.

function TableWrapper(){
  const location = useLocation()

  return <Table location={location} />
}

then table will need to have location as a prop

const Table = React.memo(({location}) => {
    return <div>something</div>
})

React.memo with react-router-dom useLocation()

1 Answers1