5 Tips Every React Developer Should Know
Tags: react, javascript, typescript, webdev
Published: 2021-10-10 05:46:39

**React** is an _amazing tool to build Front End Applications_. This article will provide you some tips which you can _immediately implement to up your **React** game_ and help you become a better **React Developer**, _Write better code_ and even help you _ace the interviews that you were initially scared of_.

# 1. Lazy Loading

**Lazy Loading** is the **design pattern** which _delays the loading or initialization of objects or resources until they are required_. This **improves performance drastically**. In the case of **React**, the _reduced bundle size leads to faster initial load time_, which is crucial these days with **dwindling attention span**.

Luckily for us, **React** makes implementing **Lazy Loading** very easy for developers. All you need to do is _wrap dynamic import statement_ `import()` with `React.lazy`.

Let's consider we have a `Counter.js` file.

```js
// Counter.js
import { useState } from 'React'

const Counter = () => {
  const [count, setCount] = useState('');

  const increment = () => setCount(count => count + 1);
  const decrement = () => setCount(count => count - 1);

  return (
    <div>
      <button onClick={decrement}> - <button>
      <span> {count} <span>
      <button onClick={increment}> + <button>
    </div>
  );
};
```

**Lazy Loading** the counter in `App.js`:

```js
// App.js
import { lazy } from 'React'

const Counter = lazy(() => import('./Counter'));

const App = () => {
  return (
    <div>
    <Suspense fallback={<Loader />}>
        <Counter />
    </Suspense>
    </div>
  );
};
```

`Counter` will be **Lazy Loaded** only when it's required and the `Loader` component will be displayed while it is loading.

# 2. Custom Hooks

With the release of **React 16.8**, developers were introduced to **React Hooks**. In simple terms, **Hook**s are _functions that allow you to implement additional features like the state and life cycle methods_ in the _light-weight_ **Functional Components**, which were formerly limited to _comparatively heavy-weight_ **Class Components**.

Apart from the **Hooks** provided by **React** out of the box, _developers can also write their own **Hooks**_ to suit their _personal requirements_.

Let's say you need access to the window dimensions, you can create a `useWindowSize` **Hook** to solve the problem.

```js
import { useState, useEffect } from 'react'

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  })

  useEffect(() => {
    const handler = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    handler()
    window.addEventListener('resize', handler)

    // Remove event listener on cleanup
    return () => {
      window.removeEventListener('resize', handler)
    }
  }, [])

  return windowSize
}
```

# 3. React Fragments

**React** requires all your **Components** to return a single element. For a long time, this was a major issue, _making you wrap everything in a `div` or use array notation_.

```js
const DivWrap = () => {
    return (
        <div>
            <ComponentA />
            <ComponentB />
        </div>
    )
}

const ArrayNotation = () => {
    return [
        <ComponentA key="a" />
        <ComponentB key="b" />
    ]
}
```

After **React 16.2**, `Fragment` was introduced. It is a **React** element that you can use to _group elements together_ but does not add any element in the **DOM**

```js
import { Fragment } from 'react'

const Frag = () => {
    return (
        <Fragment>
            <ComponentA />
            <ComponentB />
        </Fragment>
    )
}

// Or after Babel 7
const FragNewSyntax = () => {
    return (
        <>
            <ComponentA />
            <ComponentB />
        </>
    )
}
```

# 4. Dev Tools

React Dev Tools is an amazing extension available for Chrome and Firefox. It makes debugging your application a piece of cake by providing you all the details like props, state, hooks, and anything in between for each and every component.

![Dev Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qknuzv2hiywkhbulxp9x.PNG)

**Fun Fact**: You can also use it to _partially dive into the code base_ of the websites of top companies such as **Netflix**, **Twitter**, **Facebook** and any other site using **React**

![Netflix Dev Tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba9qtycjkauvky6otjoj.PNG)

# 5. Higher-Order Component (HOC)

Are you tired of adding the **Navbar**, **Sidebar**, and **Footer** to every page on your site? **Higher Order Component (HOC)** to the rescue!

**HOC** is an advanced technique in React for reusing component logic. It allows you to take a component and will return a new component with the functionality or data of the HOC included.

`withRouter()` or `connect()` are examples of some common **HOCs**.

Let's create a `withLayout` **HOC** which accepts an **Element** and automatically adds the **Navbar**, **Sidebar** and **Footer** with it.

```jsx
const withLayout = (Element) => {
    return (props) => (
        <>
            <Navbar />
            <Sidebar/>
            <Element {...props} />
            <Footer />
        </>
    );
}
```

Using the **HOC**

```jsx
const Home = () => {
    return (
        <h1>
            I am Home!
        </h1>
    )
}

export default withLayout(Home)
```

# Wrapping Up

We are at the end of the article. Hope that I could provide you with some insights. Share your thoughts in the comments below.

**Best of Luck with your React Development Journey!**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for weekly new tidbits on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
    Look into the following articles:
    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

3. **Would you like to collaborate on our site?**
    As mentioned in the _previous question_, I am in a time crunch, so I would have to pass on such opportunities.

**Connect to me on**

-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)