In this week’s episode of React Round Up the panel works their way through a blog post outlining best practices for React. The first is “keeping components small and function-specific”. The panel discusses the pros of using this best practice and how it relates to the single responsibility principle. This best practice also helps with the next, “reusability is important”.

The panel considers this second best practice and points out some of its flaws. It recommends avoiding the creation of new components. The panel explains that by avoiding creating new components it saves time but can also cause problems as you adapt components to fit more projects. 

The next best practice is “consolidate duplicate code”, the panel shares their philosophies on dry code and when to consolidate. The fourth best practice is comment only when necessary, Charles explains how he uses comments to help him keep track of things inside his code and the panel warns against using too many comments as it may clog up your code making it hard to read. 

The fifth best practice is, “name the component after the function”. The panel explains how it is an art finding a name that is not too generic but is not overly specific; mastering the art of naming is something that will benefit everyone. 

Naming relates to the sixth best practice as well. “Use capitals when naming components”. The panel explains the need for convention and advises developers not to go off-book as this will slow down others. 

The last six best practices are all self-explanatory says the panel. “Separate stateful aspects from rendering” is nothing new. “Code should execute as expected and be testable”, the panel explains how this allows for trust between developers.  “All files relating to a single component should be in the same folder”, this makes everything easy to find when necessary. 

“Use tools like Bit”, while the panel doesn’t use Bit, they share tool recommendations. They also comment on the progress being made it tooling and the future of automated tools. “Use snippet libraries”, the panel discusses favorite libraries and building their own libraries. The final best practice is “Follow linting rules”.

Panelists


Charles Wood


Christopher Reyes


Thomas Aylott


Sponsors


NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! 


Sentry– use the code “devchat” for two months free on Sentry’s small plan


CacheFly


Links


https://teachablemachine.withgoogle.com/ 


Practical React Hooks: How to refactor your app to use Hooks 


12 React Best Practices You Need to Follow in 2020 


https://github.com/nadeesha/saul 


https://www.facebook.com/React-Round-Up


https://twitter.com/reactroundup


Picks

Charles Wood:


White Christmas 


Holiday Inn 


The MaxCoders Guide To Finding Your Dream Developer Job 


Christopher Reyes:


https://github.com/microsoft/vscode-eslint 


https://www.playingwithfire.co/ 


Thomas Aylott:

test && commit || revert