10 React Practices To Make Your Code Better.

1. Functional Components > Class Components

Functional components have much simple syntax than class components and more readable.

As of now, you can't create error boundaries with class components but if you want but you can also use packages like react-error-boundary.

// 👎 Class components are verbose
class Counter extends React.Component {
  state = {
    counter: 0,
  }

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ counter: this.state.counter + 1 })
  }

  render() {
    return (
      <div>
        <p>counter: {this.state.counter}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

// 👍 Functional components are easier to read and maintain
function Counter() {
  const [counter, setCounter] = useState(0)

  handleClick = () => setCounter(counter + 1)

  return (
    <div>
      <p>counter: {counter}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  )
}

2. Keep your styling consistent

Using prettier and Eslint will save you a lot of time. another thing that you can do is to fix how your components will differ from your methods or helper functions.


one thing that you can do is to use function declaration for your components and arrow functions with other methods which are used inside components. easy search and reads.

3. Don't use the default export

With named exports, you don't just get the editor to autocomplete but also consistent naming for your components and variables.
I personally don't like to use export function add(){} and would rather prefer export {add} cause in any file I can just go to the end and know which functions are exported rather than searching for export.

// 👎  
export default function Counter(){
  return ...
}

// -----------------------//

// 👍
function Counter(){
  return ...
}

export {Counter}

4. Early exit with return keyword

early exits makes your code look much cleaner than using ternary operators or if-else.

// 👎  
function Posts(){
  const [posts, setPosts] = useState()
  ///
  return (!posts ? <CreatePost /> : <PostsList />)
}

// -----------------------//

// 👍
function Counter(){
  const [posts, setPosts] = useState()
  ///
  if(!posts) return <CreatePost />

  return <PostsList />
}

5. Avoid Nested Ternary Operators

// 👎 Nested ternaries are hard to read 
isLoading ? (
  <Loading />
) : posts.length > 0 ? (
  <PostsList />
) : (
  <CreatePost />
)

// 👍 Place them inside a component on their own
function PostsPage({ isLoading, posts }) {
  if (isLoading) {
    return <Loading />
  }

  if (posts.length > 0) {
    return <PostsList />
  }

  return <CreatePost />
}

there's an Eslint rule for this named as no-nested-ternary

6. Destructure props

With all props destructured at the top, you always know which props this component is using and it also makes your code cleaner. there's no need to write props everywhere.

// 👎 Don't repeat props everywhere in your component
function Input(props) {
  return <input value={props.value} onChange={props.onChange} />
}

// 👍 Destructure and use the values directly
function Component({ value, onChange }) {
  const [state, setState] = useState('')

  return <div>...</div>
}

7. Don't create Components inside Component

This is a very common mistake beginners make. whenever a component re-renders everything inside the component is recreated so if you create a component inside another component every time the parent component re-renders the child component will unnecessary unmount and then remount.

// run this code and check console logs
function Parent() {
  const [count, setCount] = useState(0);

// 👎 Avoid doing this
  function ChildComponent() {
    useEffect(() => {
      console.log("I am mounted");

      return () => console.log("I am unmounted");
    }, []);

    return "I am child";
  }

  return (
    <div>
      Parent : {count}
      <button onClick={() => setCount((c) => c + 1)}>add </button>
      <br />
      <ChildComponent />
    </div>
  );
}

8. You might not need State Management Library

React provides state management API like useState and useReducer. You can also use context API for making a piece of state accessible to multiple nested components. consider using redux, recoil, or any other state management library only when your app grows complex.

9. Use Absolute Paths

With absolute paths, you will have to change less when you move files from one place to another, o it makes it easier to find out where everything is getting pulled from.
you can create a jsconfig.json file at the root of your folder and have an absolute path for each directory.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/styles/*": ["styles/*"],
      "@/assets/*": ["assets/*"],
      "@/utils/*": ["utils/*"]
    }
  }
}

with jsconfig file in the root of your folder now you can import files like this

// 👎 Don't use relative paths
import {Input} from '../../../components/common/input'

// 👍 Absolute ones don't change
import {Input} from '@/components/common/input'

10. Use Data Fetching Libraries

React applications do not come with an opinionated way of fetching or updating data from your components so developers end up building their own ways of fetching data.

With data fetching libraries like react-query, you can cache, fetch, invalidate and mutate server state easily with very minimal code.

Comments

[Thomas Broyer]

With lazy-loaded components there is no escape, you need to export default them.

That's not true:

const Foo = lazy(async () => {
  const { Foo } = await import("./Foo.js");
  return Foo;
});