Our Best Practices for Writing React Components
Scott Domes
12.9K101

Hi Scott Domes,

Thanks for the article, it make me feel that I’m not alone :)

I’ve just a couple of observation regarding your solutions:

CSS IMPORTS:

Its ok (I guess) to import external libraries at the top, but be careful to import local CSS files after all the other imports! In CSS the order matters! My recommendation here, is to import css always on top of other local modules (that my have other css imports inside!).


CONDITIONALS SOLUTION

Nice solution here! Nevertheless I personally think that if your component became too complex, the real problem is elsewhere, like you are over complicating things, or you are simply not splitting enough your components. In particular if you split your components in more smaller sub components it should be better in terms of performance (or not?), as react will reconcile only the sub components that really changed!


NORMAL FUNCTION VS FAT ARROW FOR FUNCTIONAL COMPONENTS

Here I prefer to use fat arrow syntax over possible, to communicate that I don’t care (need?) about the “this” keyword inside the functional component and therefore discourage it!

For the name problem, the solution is simple: just use the displayName, like so:

const Component = ({..}) => <form className=”login-form”>…</form>

Component.displayName = ‘LoginForm’

Component.propTypes = {…}