0

(originally asked here, but aparently not the right place)

I managed to create a minimalistic example to reproduce the confusion I'm facing, here's a working SandBox.

I have a page ( see the Profile page ) that has a header, a menu and two views, each view should display the right component when the user clicks on a link in the menu,

enter image description here

In the page container, I'm using a switch statement to render the right component like this :

<div className="views">
  <div className="leftView">
    {(() => {
      switch (leftView) {
        case "A":
          return <ComponentA />;
        case "B":
          return <ComponentB />;
        default:
          return <ComponentA />;
      }
    })()}
  </div>
  <div className="rightView">
    {(() => {
      switch (rightView) {
        case "C":
          return <ComponentC />;
        case "D":
          return <ComponentD />;
        case "E":
          return <ComponentE />;
        case "F":
          return <ComponentF />;
        default:
          return <ComponentF />;
      }
    })()}
  </div>
</div>

the way I'm doing this is to set the rightView and the leftView in the router's state, ( I could put it in the container's state but i can't remember why i did it this way ), then destructure them like : const { leftView, rightView } = props.location.state;

Keep in mind that i have 31 links in the menu and 31 components to import so the file is quite big.

I'm using React.lazy to import them for code splitting ( Not used in the example for simplicity ).

Questions :

  • Is it the right approach to have leftView and rightView in the router's state ?
  • Is it the right approach to have a switch statement ?
  • Could one use react's router for those two components ? ( leftView and rightView ). I thought about having somthing like profile/A/F/1 where A and F are the views and 1 is the id but not sure about it, because then i won't be able to do /profile/1 or /profile/A/1

Problems :

  • If i add an animation to the menu or the header ( or any other part ), it will be re-animated everytime the container re-renders, i used ShouldComponentUpdate to control this but i was wondering if it's the right approach or how can I prevent this otherwise ( here's a SandBox replicating that ).

I managed to reduce the lines of code by replacing the switch with an object holding the components like so :

const compos = {
  ComponentA : lazy(() =>
    import(/* webpackChunkName: "ComponentA" */ "./ComponentA")
  ),
  ComponentB : lazy(() =>
    import(/* webpackChunkName: "ComponentB" */ "./ComponentB")
  ),,
  ComponentC : lazy(() =>
    import(/* webpackChunkName: "ComponentC" */ "./ComponentC")
  ),
};

const Profile = props => {
  const { leftView, rightView } = props.location.state;

  const LeftComp = compos[leftView];
  const RightComp = compos[rightView];

  return (
    <div className="profile">
      <div className="header" />

      <Menu {...props.location} />

      <div className="views">
        <div className="leftView">
          <LeftComp />
        </div>
        <div className="rightView">
          <RightComp />
        </div>
      </div>
    </div>
  );
};
  • Is this better than the switch In terms of readability and performance ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.