Recomended character line length in React / JSX

Question

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.

• In eslint-config-react-app there is no override for ESLint max-len rule.
• ESLint max-len seems to default to 80 characters long, but that's just for raw javascript.

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.

Answer 1

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