10 React Practices To Make Your Code Better.
Published: 2021-04-29 07:08:16

## 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](https://www.npmjs.com/package/react-error-boundary/v/3.0.2).
```js
// 👎 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.
<br>
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`.
```js
// 👎  
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.
```js
// 👎  
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
```js
// 👎 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.

```js
// 👎 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.
```js
// 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.

```js
// 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

```js
// 👎 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.<br>
With data fetching libraries like [react-query](https://react-query.tanstack.com/), you can cache, fetch, invalidate and mutate server state easily with very minimal code.