1

I have a screen with 10 charts (using recharts.org) -- when clicking on a chart I want to switch the route from http://localhost:3000/charts to http://localhost:3000/charts/first and simply have the first chart shown full screen, but without it being re-rendered since no data will change whatsoever.

Any advice on how I may achieve this?

Sammy
  • 3,395
  • 7
  • 49
  • 95
  • 1
    It's really hard to give a specific solution to such a generic question. Have you consider `React.memo`? – Dupocas Nov 25 '19 at 11:03

1 Answers1

1

The only way to do that (at least in my previous experiences) would be to have the chart on the same level as the Route (with some conditionals...), if you don't need it on top you can change the route place ... the thing is that it doesn't give much flexibility for grid/flex but it works :P (in my case I had the selected graph always on top so it was perfect fit, you may try some conditional styling based on the location but I am afraid it would rerender) 

<Route  path="/charts" >
 {history.pathname === '/charts/first' && <Chart data ..../>}
 {history.pathname === '/charts/second' && <Chart data ..../>}
 <Route  path="/charts/first" >
  <h1> Up you have the unRendered graph </h1>
</Route>
</Route>

*

Chart is a wrapper of any rechart graph(bar, pie ...) and has the REACT MEMO IMPLEMENTED

*

I spent days with this issue if you need more help just comment here

Renaldo Balaj
  • 2,390
  • 11
  • 23
  • Thank you! Why/What did you need to memoize? – Sammy Nov 25 '19 at 21:06
  • 1
    Also, I'm not sure I understand your structure exactly actually... what I would like to do is render the same chart both at `/charts` and `/charts/first`, just with a different width/height. – Sammy Nov 26 '19 at 08:26
  • Structure: The paths aren't EXACT, so when you get /charts it will go inside the and inside that you have another route , so when you change from /charts to /charts/first it will still stay in the same route /CHART but go inside /CHARTS/FIRST too, so the graph would already be calculated from the first route /charts TAKE A LOOK AT NESTED ROUTES => https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4-v5 – Renaldo Balaj Nov 26 '19 at 13:46
  • The different width and height may be a problem because recharts is based on SVG calculations where every size depends on the chart height and width(that's why I think it may rerender), _if you really need to change the width and height_ and you **can't** get it working make a repository in GitHub I may try with some workarounds (only the logic of graph not all project please) . – Renaldo Balaj Nov 26 '19 at 13:52