Scribd
Upload
26 views

React Style Guide

The document provides style guidelines for React code including: 1) Import React components using named imports rather than importing React itself. 2) Prefer using named exports over default exports. 3) Use arrow functions over function declarations for functions. 4) Name event handler functions starting with "handle" followed by the subject and event. 5) Name event handler props starting with "on" followed by the subject and event. 6) Try to avoid nested ternary operators and only use them for simple cases.

Uploaded by

Nikolay Apanasik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

React Style Guide

The document provides style guidelines for React code including: 1) Import React components using named imports rather than importing React itself. 2) Prefer using named exports over default exports. 3) Use arrow functions over function declarations for functions. 4) Name event handler functions starting with "handle" followed by the subject and event. 5) Name event handler props starting with "on" followed by the subject and event. 6) Try to avoid nested ternary operators and only use them for simple cases.

Uploaded by

Nikolay Apanasik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

React style guide

[ React import ] [ Exports ] [ Functions ] [ Event handler functions naming ] [ Event handler props naming ] [ Ternary operator ]

React import
Import from the React package. Do not import React itself.

1 /* Bad */

2 import * as React from 'react';

4 const App = (): React.ReactElement => {

5 const [state, setState] = React.useState({});

6 const elRef = React.useRef(null);

8 React.useEffect(() => {

9 ...

10 });

11 };

12

13 /* Good */

14 import { ReactElement, useEffect, useRef, useState } from 'react';

15

16 const App = (): ReactElement => {

17 const [state, setState] = useState({});

18 const elRef = useRef(null);

19

20 useEffect(() => {

21 ...

22 });

23 };

Exports
Prefer to use named export in favor of the default one.

1 /* Bad */

2 export default App;

4 /* Good */

5 export const App = () => { ... };

This guidance will be revisited in the new conventions / architecture. Continue using this in app/ base source code.

Functions
Use arrow function in favor of function declaration.

1 /* Bad */

2 function App(): ReactElement {

3 function getUser() { ... }

4 }

6 /* Good */

7 const App = (): ReactElement => {

8 cosnt getUser = () => {};

9 };

Event handler functions naming


Use the following template:

1 handle[subject?][event]

Example:

1 /* Bad */

2 const click = () => { ... }

3 const onClick = () => { ... }

4 const sendForm = () => { ... }

6 /* Good */

7 const handleClick = () => { ... }

8 const handleFormSubmit = () => { ... }

9 const handleFormReset = () => { ... }

10 const handleReset = () => { ... }

This guidance still holds true for the new src base. The extra requirement will be to always memoize the callbacks with
useCallback()

Event handler props naming


Use the following template:

1 on[subject?][event]

When creating a React component which has a prop that handles something, simply follow the  onEvent  convention (adding a  Subject  if
applicable):

1 /* Bad */

2 <SomeComponent handleFormSubmit={handleFormSubmit}></SomeComponent>

3 <SomeComponent submit={handleFormSubmit}></SomeComponent>

5 /* Good */

6 <SomeComponent

7 onFormSubmit={handleFormSubmit}
8 onFormReset={handleFormReset}

9 ></SomeComponent>

10 <SomeComponent onSubmit={handleFormSubmit}></SomeComponent>

Ternary operator
Try to use ternary operator only for the simplest cases:

1 /* Good */

2 <Component prop={condition ? value1 : value2} />

Avoid nested ternary operators:

1 /* Bad */

2 {

3 isSomeFeatureEnabled ? (

4 <>

5 {!isLoading ? (

6 <>

7 {Boolean(items.length)? (

8 <>

9 <ComponentOne />

10 <ComponentTwo />

11 </>

12 ) : (

13 <ComponentThree />

14 )}

15 </>

16 ) : (

17 <Spinner />

18 )}
19 </>

20 ) : (

21 <Placeholder />

22 );

23 }

You might also like