ReactJS best practice with complex data structures

Question

I am integrating React into an existing app. This app is data intensive and the data structure is pretty complicated which makes it a bit hard for me to adapt the React patterns, especially statelessness and composition.

Given data like this:

component: {
  options: [optionA, optionB, optionC]
}

options: {
  optionA : {
    name: 'FOO',
    choices: [choiceA, choiceB, choiceC]
  },
  optionB : {
    name: 'BAR',
    choices: [choiceD, choiceE]
  },
  ...
}

choices: {
  choiceA : {
    type: 'typeA',
    choices: [choiceA, choiceB, choiceC],
    name: 'abb'
  },
  choiceB : {
    type: 'typeB',
    name: 'abc'
  },
  ...
}

Since this data is linked by ids I have two possibilities:

Retrieve children data in parent component and pass it to the children.
Pass the ID and children retrieves it's own data.

One implies dynamically retrieving a components props and the other implies having a "god" parent which has all the necessary data for it's children, which one is the better approach?

My other question is if the component that takes a Choice as its props should display differently depending on the type of it's Choice, is the better approach to make a wrapper component like this? :

class Choice extends Component {
  constructor(props){
    super(props);
  }
  
  render(){
    switch(props.choice.type){
       case "typeA":
         return (<TypeAComponent />);
       case "typeB":
         return (<TypeBComponent />);
       default:
          return (..);
    }
  }
}

Or is there a cleaner alternative (I'm a bit allergic to switch cases)...

Dan Homola · Accepted Answer · 2017-02-14 20:40:01Z

4

Ad your first question:

I would opt for the first solution i.e. retrieving the data in the parent. This will make move to some kind of state management (redux) if you choose so much easier (it will be handled in one place only).

Ad your second question:

You can get rid of the switch using a dictionary:

const choiceRenderers = {
    "typeA": () => <TypeAComponent />,
    "typeB": () => <TypeBComponent />,
    // etc.
};

class Choice extends Component {
    render() {
        const renderer = choiceRenderers[this.props.choice.type];
        return renderer
            ? renderer()
            : <DefaultChoice />;
    }
}

The potential advantage is that this choice—component mapping could be shared across multiple components without replicating it, you can just store it in a module and import it when needed.

edited Feb 14, 2017 at 20:40

answered Feb 14, 2017 at 20:09

Dan Homola

4,6352 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Malo Guertin Over a year ago

Thanks that confirms what I was thinking! About moving to Redux, do you think it's adaptable with deeply linked data structures?

Dan Homola Over a year ago

According to redux's creator, Dan Abramov, it works better with shallow state trees. For more info, I cannot recommend his egghead course enough, it is a great resource for learning all about it

Collectives™ on Stack Overflow

ReactJS best practice with complex data structures

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related