CODEWITHSUNDEEP
reactjs
jshthornton
jshthornton

Reputation: 1314

Using the factory pattern with React

Let's say I have a really dumb component A. I don't want any of the rendering logic from data to go in this component. Just take some raw data and display it.

Which is the more react way of going about this?

  1. Creating just a bog standard factory function, that given different flags will create a new component with different props set
  2. Making a wrapping component which does all the logic and sets the correct props from the data.

My fear with creating a wrapper is it is just more bloat in the chain of components. When this feels more a tangent.

Upvotes: 9

Views: 6367

Answers (1)

Mijamo
Mijamo

Reputation: 3516

Actually separating logic from presentation is pretty usual in React and considered best practise. So solution 2 is the way to go.

Your component A would then probably be a stateless function http://facebook.github.io/react/docs/reusable-components.html#stateless-functions whereas it's father would have only logic methods.

For your information, such a scheme is also the default way of using redux store, see http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components

Upvotes: 7

Related Questions