Optimization is the selection of the best element from some set of available alternatives.

React allows us to build encapsulated components that manage their own state, then composes them to make complex UIs.

These components make up small parts of our UI. This means a lot of times we unintentionally create redundant components and structure our code in ways that can impact the overall loading time of our application.

If you’re experiencing performance problems in your React apps, here are some techniques you can follow to optimize the performance of your app:

React.Suspense and React.Lazy to load components declaratively

Lazy loading is a popular optimization technique widely used to speed up the load time of applications. React.Lazy helps us load components on demand thereby reducing the load time of our application as only the needed pieces will be present as requested.

const Page = () => (
    render() {
        return (<div>Home Page</div>)
    }
)
const App = React.lazy(()=>import('./Page.js'))
function App() {
    return (<div><Page /></div>)
}

React.Suspense is used to wrap lazy components to show fallback content while loading the component.

const Page = React.lazy(()=>import('./Page.js'))

const App = () => (
    return (
    <div>
        <Suspense fallback={<div>loading ..</div>}>
            <Page />
        </Suspense>
    </div>
)

Use React.PureComponent to prevent unnecessary re-rendering with shouldComponentUpdate()

React.PureComponent implements shouldComponentUpdate() with a shallow prop and state comparison.

// use this
class App extends React.PureComponent {
    render() {
        return (<div>Home</div>)
    }
}
// instead of
class App extends React.Component {
    render() {
        return (<div>Home</div>)
    }
}

Use React.Memo to cache components

A memoized function is faster because if the function is called with the same values as the previous one instead of executing function logic, it will instead fetch the result from cache.

const Page = () => <div>My Page</div>
export default React.memo(Page);

Check for unused npm packages

A lot of times you will find unused npm packages in your app. To remove unused npm packages, you can do the following: Install the module:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

npm install depcheck -g
or
yarn global add depcheck

Run it and find the unused dependencies:

depcheck

Handle the images so they load faster

1. Downsize the larger images to the size needed by your design — even on the desktop, there is no need to go for the biggest image possible.
2. Format images to newer formats like JPEG-XR and WebP — common formats like PNG, JPG, or GIF are not optimized to be sent wireless.
3. Lower image quality — many images have an extra-high resolution, however, it’s possible to lower quality without any significant visual impact.
4. On small devices downsize the image even more — mobiles usually have a slower Internet connection, and on small screens, users don’t need super high resolutions.
5. Use lazy loading — allow your images to wait with download until the user scrolls down to them, it can really shorten page initialization.

Conclusion

The React ecosystem is vast and powerful. We can leverage the numerous tools that are available to us to build huge complex applications. Above are just a few techniques that can make our applications fast and smooth. The additional effort is definitely worth the benefits of getting a higher-performance, more maintainable codebase.