Sunny Singh

Creating Content & Code

Feb 27, 2017

I think that it depends on the scenario. For different screens or popups, separate components definitely make sense because you don't want a single component to be handling too many responsibilities (or at least not inlined, obviously you can import into a main LoginPage component). However, if you simply have some conditional logic to render a link or button, that can either go inline of the render() method, or I would suggest put it into its own class method (I usually use the convention of prefixing it with render, like renderForgotLink(). I prefer this convention of class methods instead of constants in render() because when I look at the render()method, I want to know exactly what will be shown without having to scroll down too far.

Mirko Vukušić

Full(stack|dev|life)

Feb 27, 2017

That's my current approach too. But prefixing methods with render is a nice tip! I asked because official docs use constants within `render()` (facebook.github.io/react/docs/conditional-renderi…) and I also don't like it. I want render to deal with rendering and avoid as much logic from it as I can. Occasional && or || is ok.

Putting too much into separate components (especially if you keep each component in it's own file) creates too much dependencies in my opinion. I did a compromise few times and included bunch of micro-components into single library file which I can include partially, when and what I need.

But I still have a feeeling I'm missing a better method :)

Yep, I'm in the same boat as well. Regarding dependencies, are you doing something like this?

import { Component1, Component2 } from '../Login'

I think that's a good solution. If you're structuring via folders for components, an index.js file can import and immediately export all the components. I like this approach because it's like creating an internal library, or API for your own components.

Not exactly like that, but I like the ideo of import/reexport all from index.js. Currently, for more complex components I use folder structure with index.js, but I use index.js mostly as root component which keeps component specific state, connects to stores (MobX) and conditionaly renders child components. Then child components go into separate files in this folder. And then I have sub-child components which change very small parts of child components UI, down to single button. That's where I asked the Q above. For those small ones. Currently I keep them in child components methods, but few times I created another file in component folder called lib.js where I exported multiple simple and reusable (usually stateless) components like cancel button, validation helpers, etc.

Search Hashnode