Recomended character line length in React / JSX

user_2228536 0
Viewed 6122

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.

jsx create-react-app reactjs coding-style
2 Answers

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
user_14198720

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.

user_96843530
Related