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.

// 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:

// 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, Hooks 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.

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.

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

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.

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

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.

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

Using the HOC

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

Thanks for reading

Want to work together? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

FAQ

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

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
1. Front End Development Roadmap
2. Front End Project Ideas
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
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

5 Tips Every React Developer Should Know