A detailed explanation of React’s system for reusing component logic

Have you ever been working in a codebase or been watching a tutorial online and come across something that looks like this:

export default withResponsive(Home)

Well then you already have encountered a Higher Order Component whether you’ve realized it or not.

A Higher Order Component (HOC for short) is React’s way over giving multiple components some repeated functionality or behavior, without having to reuse the same code over and over again in the component. …

Using Amplitude’s npm library

Amplitude

Amplitude is a data analytics startup that aims to make adding analytics to your web or mobile app simple and easy. It is a Y Combinator company and has backing from some major VC firms such as Sequoia.

Due to its effectiveness and simplicity, they have seen a massive boom in customer growth during the pandemic, and a massive rise in valuation to go with it (recently valued at $4B as of writing this article).

All of these reasons (the simplicity, the customization options, the clean UI, the strong adoption in the industry) are the reason…

Before reading this you should familiarize yourself with what Redux is and how to use it in React class components.

Setup

Start by creating a new react app. I’ll be using a package called Redux Toolkit to get the shell of the app set up quickly. If you’d like to do the same run:

npx create-react-app my-app --template redux

This creates your React app to use the official template for working with Redux. Then inside your app run:

npm install @reduxjs/toolkit react-redux
npm install redux

At src/app/store.js create the following:

Then, head to index.js …

Redux

Intro

Redux is a state management tool for JavaScript, that makes it much simpler to maintain state in your application.

It is especially useful in React applications because it lets you avoid the behavior of passing props down through many different child components until it reaches a deeply nested component that needs the data.

Instead, all of the state information for your app is stored in something appropriately called a store. Here is a guide on how to set up the store in your React app

With Redux, once a store is created, any component that is set up to use…

Introduction

One of the nicest things about React’s component style of coding is the clear relationships defined between Parent and Child elements. Very often you will run into a scenario where a Parent component is responsible for rendering a Child component with different characteristics or display properties depending on some action by the user. In this case, you would pass the Child component different “props” which are then used inside of it to display data in some way.

This is useful because it lets you consider each component in complete isolation. This is referred to as “separation of concerns”. …

When I was first learning to code, I would be the only engineer working on an app. Every once in a while I would have a project I would be working on with one other engineer, but a lot of the progress was made during pair programming sessions, where we would just push all the changes directly to master.

When I moved onto larger apps and began working at a company with a dozen engineers I began learning how to use branches, and how to use pull requests to merge my changes to the code base without affecting the other…

useState

The useState hook does exactly what it sounds like. It allows you use use state in your functional component. Let’s take a look how this is normally done in a class component and then make the changes to a functional component using the useState hook.

import React from 'react'class MyComponent extends React.Component
  constructor(props) {
    super(props);    
    this.state = {      
      name: "",
      email: """,
      student: false,
    };  render() {
    return (
      <form>
        {Some JSX Code Here}
      </form>
    )
  }export default MyComponent

Normally when creating state in a class component you use the constructor function and then declare a state object…

How to make the process easier for yourself as well as potential engineering candidates taking your assessment.

Introduction

The technical interviewing process is a grueling one for the parties on both sides. If you’re a company looking for the best new engineers, there is a ton of competition from other companies trying to hire young superstar talent before you do. There’s also the issue of people not always being completely forthcoming on their resumes. How do you know the candidate you are interviewing will be a good fit? On the other hand, let’s say you’re an early career Software Engineer looking…