Recomended character line length in React / JSX

3
votes

I know React community is very focused on creating good patterns, and I've been searching at React forums, github, articles and cannot find any mentions about the 'optimun' line length for jsx code.

Given that JSX is a different kind of code (it includes HTML markup that might add the need for more characters), is there any recommendation by the React community about this?

Edit

Found Airbnb React/JSX Style Guide, that seems to be well accepted, but no mention about the line length. Also I'm liking to know your experiences.

2
reactjscoding-stylejsxcreate-react-app
I use character limit of 100. - Adeel Imran
It's more of a personal choice, what ever your team can agree on. The idea is to have the same standard writing practice of code. React Material UI uses 100 lineWidth as well. - Adeel Imran
I also agree this is a personal choice. I just got curious if the React community agreed in some number (code style purposes). Or we could very well have some study on the 'optimal' number, as we have studies for the optimal number for the number of spaces for identation tabs (involving the human brain, etc). - inafalcao

2 Answers

1
votes

As far i know there is no de-facto best practice for maximum number of the JSX Line of Code on the React community. You could adjust it by yourself.

On our project we make it to around 20 lines for a function. If the JSX code exceeded the threshold, we assume the component is too bloated and refactor it into smaller component.

eslint-plugin-react also worth to try to reduce the complexity of your JSX code.

  1. eslint-plugin-react/jsx-max-depth
  2. eslint-plugin-react/jsx-max-props-per-line
0
votes

I don't think there's a magic number for line length. My team also thinks 80 is too short so we go with 100.

I'd pick something and see how it feels. Understanding what you prefer and why is usually more important than following a community standard.