5 React Performance Tips

React is popular because React applications scale well and are fun to work with. Once your app scales, you might consider optimizing your app. Going from 2500ms wait time to 1500ms can have huge impacts on your UX and conversion rates.

So without further ado, here are some performance tips I use with React.


If you have a stateless component and you know your component won’t be needing re-render, wrap your entire stateless component inside a React.memo function.

Becomes the following;

How to setup a powerful API with GraphQL, Koa and MongoDB -- deploying to production

Our GraphQL runs smoothly locally, but what if we want to share it with the world?

In order to make our graphQL api available to the public, we’ll need to deploy it on a production server. I chose Heroku for it’s simplicity.

Head over to Heroku, create a user if you haven’t, and create a new project. We don’t have to pay anything for our demo.

Head over to the deploy tab and sync the Heroku with Github. Easiest way is to deploy via our Github repository.

And finally, add the mlab Heroku add-on.

Heroku Dashboard

pm2 set-up

Next, let’s get our pm2 ready for production. Since Heroku runs our scripts , we’ll need to add pm2 to our package.json.

How to setup a powerful API with GraphQL, Koa and MongoDB -- scalability and testing

Welcome to our part III series where we set up a powerful API. So far, we have achieved basic CRUD functionality.

As our app grows, so does our mutation count. In order to have as clean codebase as we can, we should extract the mutations to dedicated files. This way we can assure our code is modular and separated into maintainable chunks.

Let’s create a folder graphql/mutations and inside the folder create addGadget.js, updateGadget, and removeGadget files..

We simply place the mutation objects into the files and export them.

Moving addGadget mutation to separate file


const { GraphQLObjectType, GraphQLString } = require('graphql');
const gadgetGraphQLType =  require('./../gadgetType');
const Gadget = require('./../../models/gadget');

module.exports = {
  type: gadgetGraphQLType,
  args: {
    name: { type: GraphQLString },
    release_date: { type: GraphQLString },
    by_company: { type: GraphQLString },
    price: { type: GraphQLString }
  resolve(parent, args) {
    const newGadget = new Gadget({
      name: args.name,
      release_date: args.release_date,
      by_company: args.by_company,
      price: args.price,

    return newGadget.save();

How to setup a powerful API with GraphQL, Koa and MongoDB -- CRUD

This is a series where we learn how to set-up a powerful API with GraphQL, Koa and Mongo. The primary focus will be on GraphQL. Check out part I if you haven’t yet.


So far we can read our data, but there’s a big chance we need to edit our data records/documents. Any complete data platform needs a way to modify server-side data as well.

Okay, imagine this– a company launched a new gadget. How would we go on about adding the record to our database with GraphQL?

Mutations to the rescue!

Think of Mutations like POST or PUT REST actions. Setting up a mutation is quite straight-forward.

Let’s jump in!

How to setup a powerful API with GraphQL, Koa and MongoDB

Building API’s is super fun! Especially when you can leverage modern technologies such as Koa, GraphQL and MongoDB.

Koa is a Node framework, just like Express is a Node framework. We’ll replace Express with Koa since Koa uses async/await syntax over callbacks.

Koa Github repository

Express Github repository

Getting started

The prerequisites for building our API are the following;

  • Node installed
  • Text Editor; I pick Visual Studio Code
  • Terminal
  • Browser

How to improve your asynchronous Javascript code with async and await

How to improve your asynchronous Javascript code with async and await

If you’ve had the chance to observe modern Javascript code — chance are high you have seen the async and await syntax somewhere.

Async/await is arguably one of the best-received new additions to the language. Async/await makes asynchronous code appear and behave like synchronous code. Async/await are promise-based.

Before we jump into async/await, we must understand what are promises and the role they play.


The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.”)


Why do we need asynchronous code, anyway?

Here are some of the best resources to improve your coding skills

There are lots of high-quality coding tutorials, books, and overall resources on the web. I’ve gathered the very best for you and put them in a convenient list. Without further ado, let’s dive in!


Devhints has the biggest collection of cheat-sheets on the Internet. Big time saver and a great way to familiarize yourself with all the concepts.

How to use destructuring and arrow functions to improve your JavaScript code

Without further ado, here are some everyday “tricks” to make your Javascript code much more readable.


Take this (intentionally) deeply nested object. Reading the age of a mammal would lead us to a very verbose and repetitive code.

Instead of doing that, we can use shorten our code by a huge margin with object destructing.

Object destructuring

Destructing bear and deer

Much better and less verbose. Note that we’re using constants since we don’t want to change the age. But think about it: age is not a constant… once per year in fact the age does increment.

Here are the most interesting developer podcasts — 2019 edition

Who doesn’t love to hear the opinions of peer developers? Frankly put, Some of the most useful resources I’ve picked up is from listening to different opinions and thoughts. I’ve put together a small but comprehensive list of my favorite podcasts. The core topics revolve around coding, well-being philosophy, and how to cope with a different set of challenges.

I find myself listening to podcasts while doing the dishes, while on an airplane, driving, and commuting. Learning from podcasts adds up really quickly — there’s so much to learn yet so little time — why not try to maximize ways to improve?

If yours didn’t make it to the list, please post it in the comments and I’ll make sure to check it out!

Assume that the Person You’re Listening to Might Know Something You Don’t —Jordan Bernt Peterson

Here’s yet another list of exciting projects to build

Coding is a skill which is acquired through hard work and passion. To become good at something, one must put in the effort. Don’t be that person who quits when things get hard. There’s light at the end of the tunnel and it’s well worth it!

It is important to build thing if you want to become great at coding. The secret to being a top developer is building a lot of things!

Nothing good comes easy. If it’s hard, it’s worth doing. Most of us are excited to code, but lack the ideas. Summer is over and it’s time to start coding again. Allow me to present some challenging, yet fun ideas to build.

1 — Customizable rich text editor

A rich text editor’s aim is to reduce the effort for users trying to express their formatting as valid HTML markup. A rich text editor enables the users the option to format their text in different ways.

Everyone has used a rich text editor at some point. So why not build one yourself?

2 — Reddit clone

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now