Forem: Joseph Mawa

JavaScriptmas interview type coding challenges

Joseph Mawa — Thu, 24 Dec 2020 07:26:05 +0000

Cover image by Pexels from Pixabay

Introduction

These are my solutions to a set of programming challenges by scrimba dubbed JavaScriptmas which ran from December 01, 2020 to December 24, 2020.

These challenges are mostly beginner programming problems. You might encounter one or two in a technical interview for an entry level job. If you are a beginner in JavaScript, it might help consolidate your JavaScript knowledge. I have documented my solutions here. The same solutions can also be found on Scrimba by following the link below each challenge description. You are free to play with the code.

If you are interested, I have also compiled these challenges in a GitHub repository which you can find at the link below.You are free to fork it under your own account and modify the solutions.

nibble0101 / javascriptmas

Beginner-friendly coding challenges in JavaScript.

Javascriptmas

This is a set of programming challenges from scrimba.com dubbed 24 days of JavaScriptmas. It runs from December 01, 2020 - December 24, 2020. Each day a JavaScript challenge is posted and participants are free to attempt and share their solution on twitter. If you want to contribute to this set of solutions, read the contribution instructions.

Challenges

Candies

Solution 1

 function candies(children, candy) {
   return Math.floor(candy / children) * children;
 }

Solution 2

 function candies(children, candy) {
    return candy - (candy % children);
 }

Deposit profit

Solution

function depositProfit(deposit, rate, threshold) {
  const years = Math.log(threshold / deposit) / Math.log(1 + rate / 100);
  return Number.isInteger(years) ? years +

…

View on GitHub

If you have a better solution or notice an inefficient or incorrect solution, feel free to open a pull request after reading the contribution guidelines or leave your solution in the comments section below. You never know someone might find it useful. I have written unit tests in jest which you can find at the GitHub repository.

Challenges

No.	Challenge
01	Candies
02	Deposit Profit
03	Chunky Monkey
04	Century from year
05	Reverse string
06	Sort by length
07	Count vowel consonants
08	The rolling dice
09	Sum odd fibonacci numbers
10	Adjacent elements product
11	Avoid obstacles
12	Valid time
13	Extract each kth
14	Array maximal adjacent diff
15	JavaScript carousel
16	Insert dashes
17	Different symbols naive
18	Array previous less
19	Alphabet subsequence
20	Domain type
21	Sum of 2
22	Extract matrix column
23	Tweet Input Component
24	Test your agility challenge

Candies

n children have got m pieces of candy. They went to eat as much candy as they can, but each child must eat exactly the same amount of candy as any other child. Determine how many pieces of candy will be eaten by all the children together. Individual pieces of candy cannot be split.

Example
For n = 3 and m = 10, the output should be candies(n, m) = 9. Each child will eat 3 pieces. So the answer is 9.

/**
* @params  integer
* @params  integer
* @returns integer
*/

function candies(children, candy) {

}

Solution on Scrimba

Solution 1

function candies(children, candy) {
  return Math.floor(candy / children) * children;
}

Solution 2

function candies(children, candy) {
   return candy - (candy % children);
}

Deposit profit

You have deposited a specific amount of dollars into your bank account. Each year your balance increases at the same growth rate. Find out how long it would take for your balance to pass a specific threshold with the assumption that you don't make any additional deposits.

Example

For deposit = 100, rate = 20 and threshold = 170, the output should be depositProfit(deposit, rate, threshold) = 3. Each year the amount of money on your account increases by 20%. It means that throughout the years your balance would be)

year 0: 100
year 1: 120
year 2: 144
year 3: 172.8

Thus, it will take 3 years for your balance to pass the threshold, which is the answer.

/**
*@params  number
*@params  number
*@params  number
*@returns number
*/
function depositProfit(deposit, rate, threshold) {

}

Solution on Scrimba

Solution

function depositProfit(deposit, rate, threshold) {
  const years = Math.log(threshold / deposit) / Math.log(1 + rate / 100);
  return Number.isInteger(years) ? years + 1 : Math.ceil(years);
}

Chunky Monkey

Write a function that splits an array (first argument) into groups the length of size (second argument) and returns them as a two-dimensional array.

Example

chunkyMonkey(["a", "b", "c", "d"], 2) should return [["a", "b"], ["c", "d"]]
chunkyMonkey([0, 1, 2, 3, 4, 5], 4) should return [[0, 1, 2, 3], [4, 5]]

/**
*@params   any[]
*@params   integer
*@returns  Array<Array<any>>
*/
function chunkyMonkey(values, size) {

}

Solution on Scrimba

Solution

function chunkyMonkey(values, size) {
  const chunkedArray = [];
  const arrayLength = values.length;
  for (let i = 0; i < arrayLength; i += size) {
    chunkedArray.push(values.slice(i, i + size));
  }
  return chunkedArray;
}

Century from year

Given a year, return the century it is in. The first century spans from the year 1 up to and including the year 100. The second century from the year 101 up to and including the year 200.

Example

For year = 1905, the output should be centuryFromYear(year) = 20.
For year = 1700, the output should be centuryFromYear(year) = 17.

/**
*@params  integer
*@returns integer
*/

function centuryFromYear(num) {

}

Solution on Scrimba

Solution

function centuryFromYear(num) {
  return num % 100 ? Math.ceil(num / 100) : num / 100;
}

Reverse string

Reverse the provided string.You may need to turn the string into an array before you can reverse it. Your result must be a string.

Examples

reverseAString("hello") returns "olleh"
reverseAString("Howdy") returns "ydwoH"

/**
*@params  string
*@returns string
*/

function reverseAString(str) {

}

Solution on Scrimba

Solution 1

function reverseAString(str) {
  return str.split('').reverse().join('');
}

Solution 2

function reverseAString(str) {
  let reversedString = ''; const { length } = str;
  for (let i = 0; i < length; i += 1) {
    reversedString = str[i] + reversedString;
  }
  return reversedString;
}

Sort by length

Given an array of strings, sort them in the order of increasing lengths. If two strings have the same length, their relative order must be the same as in the initial array.

Example

/**
*@params  [string]
*@returns [string]
*/
function sortByLength(strs) {

}

Solution on Scrimba

Solution

function sortByLength(strs) {
  return strs.sort((a, b) => a.length - b.length);
}

Count vowel consonants

You are given a string str that consists of only lowercase English letters. If vowels ('a', 'e', 'i', 'o', 'u') are given a value of 1 and consonants are given a value of 2,return the sum of all of the letters in the input string.

Example

For str = "abcde" the output should be countVowelConsonant(str) = 8.

/**
*@params  string
*@returns integer
*/

function countVowelConsonant(str) {

}

Solution on Scrimba

Solution

function countVowelConsonant(str) {
  return str.split('').reduce((count, char) => ('aeiou'.indexOf(char) === -1 ? count + 2 : count + 1), 0);
}

The rolling dice

In this challenge a casino has asked you to make an online dice that works just like it would in real life. Using the dice face that represents ‘one’ which has been made for you, make the faces for ‘two’, ‘three’, ‘four’, ‘five’ and ‘six’. Now when the users clicks the dice on the screen the dice is expected to show one of the faces randomly.

Note
You can check the scrimba playground below for the HTML, CSS and JavaScript files.

Solution on Scrimba

Sum odd fibonacci numbers

Given a positive integer num, return the sum of all odd Fibonacci numbers that are less than or equal to num. The first two numbers in the Fibonacci sequence are 1 and 1. Every additional number in the sequence is the sum of the two previous numbers. The first six numbers of the Fibonacci sequence are 1, 1, 2, 3, 5, 8. For example sumOddFibonacciNumbers(10) should return 10 because all odd Fibonacci numbers less than or equal to 10 are 1, 1, 3, 5.

Examples

sumOddFibonacciNumbers(10) should return 10
sumOddFibonacciNumbers(1000) should return 1785
sumOddFibonacciNumbers(4000000) should return 4613732

/**
*@params  integer
*@returns integer
*/
function sumOddFibonacciNumbers(num){

}

Solution on Scrimba

Solution

function sumOddFibonacciNumbers(num) {
  if (num < 2) return 2;
  const cache = [1, 1];
  let sumOfOddFibNums = 2;
  while (cache[0] + cache[1] <= num) {
    const nextFibNum = cache[0] + cache[1];
    if (nextFibNum % 2) {
      sumOfOddFibNums += nextFibNum;
    }
    cache[0] = cache[1];
    cache[1] = nextFibNum;
  }
  return sumOfOddFibNums;
}

Adjacent elements product

Given an array of integers, find the pair of adjacent elements that has the largest product and return the product.

Examples

For inputArray = [3, 6, -2, -5, 7, 3] adjacentElementsProduct(inputArray) should return 21 because 7 and 3 produce the largest product

/**
*@params  number[]
*@returns integer
*/

function adjacentElementsProduct(nums){

}

Solution on Scrimba

Solution

function adjacentElementsProduct(nums) {
  if (nums.length < 2) return nums[0];
  let product = nums[0] * nums[1];
  const lastIndex = nums.length - 1;

  for (let i = 1; i < lastIndex; i += 1) {
    if (nums[i] * nums[i + 1] > product) {
      product = nums[i] * nums[i + 1];
    }
  }
  return product;
}

Avoid obstacles

You are given an array of integers representing coordinates of obstacles situated on a straight line. Assume that you are jumping from the point with coordinate 0 to the right. You are allowed only to make jumps of the same length represented by some integer. Find the minimal length of the jump enough to avoid all obstacles.

Examples

For inputArray = [5, 3, 6, 7, 9] avoidObstacles(inputArray) should return 4.

/**
*@params  number[]
*@returns integer
*/

function avoidObstacles(nums) {

}

Solution on Scrimba

Solution

function avoidObstacles(nums) {
  if (!Array.isArray(nums) || !nums.length) {
    throw new Error('Requires integer array');
  }

  const largestObstacle = Math.max(...nums);

  /*
  OR:
  const largestObstacle = nums.reduce((prev, curr) => {
      return curr > prev ? curr : prev;
  });
  */

  for (let jump = 2; jump <= largestObstacle; jump += 1) {
    if (nums.every((obstacle) => obstacle % jump !== 0)) {
      return jump;
    }
  }
  return largestObstacle + 1;
}

Valid time

Check if the given string is a correct time representation of the 24-hour clock.

Examples

For time = "13:58", validTime(time) should return true.
For time = "25:51", validTime(time) should return false.
For time = "02:76", validTime(time) should return false.

/**
*@params  string
*@returns boolean
*/

function validTime(str){

}

Solution on Scrimba

Solution

function validTime(str) {
  if (typeof str !== 'string' || !str.includes(':')) {
    return false;
  }
  let [hour, minutes] = str.trim().split(':');
  hour = hour.trim();
  minutes = minutes.trim();
  if (/\D/.test(hour) || /\D/.test(minutes)) {
    return false;
  }
  hour = parseInt(hour, 10);
  minutes = parseInt(minutes, 10);
  return hour >= 0 && hour < 24 && minutes >= 0 && minutes < 60;
}

Extract each kth

Given an array of integers, remove each k^th element from it.

Example

For inputArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] and k = 3 the output of extractEachKth(inputArray, k) should be [1, 2, 4, 5, 7, 8, 10].

/**
*@params  number[]
*@params  integer
*@returns number[]
*/

function extractEachKth(nums, index){

}

Solution on Scrimba

Solution

function extractEachKth(nums, index) {
  return nums.filter((__, i) => (i + 1) % index !== 0);
}

Array maximal adjacent difference

Given an array of integers, find the maximal absolute difference between any two of its adjacent elements.

Examples

For inputArray = [2, 4, 1, 0] arrayMaximalAdjacentDifference(inputArray) should return 3
For inputArray = [2, 9, 1, 0] arrayMaximalAdjacentDifference(inputArray) should return 8

/**
*@params number[]
*@returns number
*/

function arrayMaximalAdjacentDifference(nums){

}

Solution on Scrimba

Solution

function arrayMaximalAdjacentDifference(nums) {
  if (!Array.isArray(nums) || !nums.length) {
    throw new Error('Invalid argument');
  }

  if (nums.length < 2) return nums[0];

  let maxAbsoluteDiff = Math.abs(nums[0] - nums[1]);
  const lastIndex = nums.length - 1;

  for (let i = 1; i < lastIndex; i += 1) {
    const diff = Math.abs(nums[i] - nums[i + 1]);
    if (maxAbsoluteDiff < diff) {
      maxAbsoluteDiff = diff;
    }
  }

  return maxAbsoluteDiff;
}

JavaScript carousel

In this challenge, one is required to make carousel work using JavaScript. The HTML, CSS and JavaScript files can be found in the Scrimba playground by following the link below.

Solution on Scrimba

Solution

const previousButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');
const allImages = document.querySelectorAll('img.card');
const gallery = document.querySelector('.gallery');
const imageCount = allImages.length;

let visibleImageId = 0;

function togglePreviousButtonBlur(action = 'INCREASE_OPACITY') {
  if (action === 'LOWER_OPACITY') {
    previousButton.style.opacity = 0.3;
    return;
  }
  previousButton.style.opacity = 1;
}

function toggleNextButtonBlur(action = 'INCREASE_OPACITY') {
  if (action === 'LOWER_OPACITY') {
    nextButton.style.opacity = 0.3;
    return;
  }
  nextButton.style.opacity = 1;
}

function translateGallery(visibleImageId) {
  const currentVisibleImage = document.querySelector('.current');

  currentVisibleImage.classList.remove('current');
  allImages[visibleImageId].classList.add('current');
  gallery.style.transform = `translateX(${visibleImageId * -220}px)`;
}

function previousButtonClickHandler() {
  if (visibleImageId === 0) return;

  translateGallery(--visibleImageId);

  if (visibleImageId === 0) {
    togglePreviousButtonBlur('LOWER_OPACITY');
    return;
  }
  togglePreviousButtonBlur();
  toggleNextButtonBlur();
}

function nextButtonClickHandler() {
  if (visibleImageId === imageCount - 1) return;

  translateGallery(++visibleImageId);

  if (visibleImageId === imageCount - 1) {
    toggleNextButtonBlur('LOWER_OPACITY');
    return;
  }
  toggleNextButtonBlur();
  togglePreviousButtonBlur();
}

previousButton.addEventListener('click', previousButtonClickHandler);
nextButton.addEventListener('click', nextButtonClickHandler);

Insert dashes

Transform a given sentence into a new one with dashes between each two consecutive letters.

Example

For inputStr = "aba caba", insertDashes(inputStr) should return "a-b-a c-a-b-a".

/**
*@params  string
*@returns string
*/

function insertDashes(str){

}

Solution on Scrimba

Solution

function insertDashes(str) {
  return str
    .split(' ')
    .map((word) => word.split('').join('-'))
    .join(' ');
}

Different symbols naive

Given a string, find the number of different characters in it.

Example

For inputStr = "cabca", differentSymbolsNaive(inputStr) should return 3 because there are three different characters a, b and c.

/**
*@params  string
*@returns number
*/

function differentSymbolsNaive(str){

}

Solution on Scrimba

Solution 1

function differentSymbolsNaive(str) {
  if (typeof str !== 'string') {
    throw new Error('Invalid input');
  }
  let uniqueChars = '';
  const { length } = str;
  for (let i = 0; i < length; i += 1) {
    if (!uniqueChars.includes(str[i])) {
      uniqueChars += str[i];
    }
  }
  return uniqueChars.length;
}

Solution 2

function differentSymbolsNaive(str) {
  if (typeof str !== 'string') {
    throw new Error('Invalid input');
  }
  return new Set(str).size;
}

Solution 3

function differentSymbolsNaive(str) {
  if (typeof str !== 'string') {
    throw new Error('Invalid input');
  }
  const uniqueChars = {};
  return str.split('').reduce((charCount, char) => {
    if (uniqueChars[char]) {
      return charCount;
    }
    uniqueChars[char] = char;
    return charCount + 1;
  }, 0);
}

Array previous less

Given an array of integers, for each position i, search among the previous positions for the last (from the left) position that contains a smaller value. Store that value at position i in the answer. If no such value can be found, store -1 instead.

Examples

For inputArray = [3, 5, 2, 4, 5], arrayPreviousLess(inputArray) should return [-1, 3, -1, 2, 4].

/**
*@params  number[]
*@returns number[]
*/

function arrayPreviousLess(nums) {

}

Solution on Scrimba

Solution 1

function arrayPreviousLess(nums) {
  if (!Array.isArray(nums)) {
    throw new Error('Invalid input');
  }
  const { length } = nums;
  const arrayClone = [...nums];

  // eslint-disable-next-line no-restricted-syntax
  outerLoop: for (let i = 0; i < length; i += 1) {
    if (typeof nums[i] !== 'number') {
      throw new Error('Invalid input');
    }
    for (let j = i - 1; j >= 0; j -= 1) {
      if (nums[i] > nums[j]) {
        arrayClone[i] = nums[j];
        // eslint-disable-next-line no-continue
        continue outerLoop;
      }
    }
    arrayClone[i] = -1;
  }
  return arrayClone;
}

Solution 2

function arrayPreviousLess(nums) {
  if (!Array.isArray(nums)) {
    throw new Error('Invalid input');
  }
  const arrayClone = [...nums];
  nums.forEach((element, index) => {
    if (typeof element !== 'number') {
      throw new Error('Invalid input');
    }
    for (let i = index - 1; i >= 0; i -= 1) {
      if (element > nums[i]) {
        arrayClone[index] = nums[i];
        return;
      }
    }
    arrayClone[index] = -1;
  });
  return arrayClone;
}

Alphabet subsequence

Check whether the given string is a subsequence of the plaintext alphabet

Examples

For inputStr = "effg", alphabetSubsequence(inputStr) should return false
For inputStr = "cdce", alphabetSubsequence(inputStr) should return false
For inputStr = "ace", alphabetSubsequence(inputStr) should return true
For inputStr = "bxz", alphabetSubsequence(inputStr) should return true

/**
*@param   string
*@returns boolean
*/

function alphabetSubsequence(str){

}

Solution on Scrimba

Solution

function alphabetSubsequence(str) {
  if (typeof str !== 'string' || !str.length) {
    throw new Error('Invalid input');
  }
  const lowerCaseStr = str.toLowerCase();
  const lastIndex = str.length - 1;
  for (let i = 0; i < lastIndex; i += 1) {
    const thisCharCode = lowerCaseStr.charCodeAt(i);
    const nextCharCode = lowerCaseStr.charCodeAt(i + 1);
    if (nextCharCode <= thisCharCode) {
      return false;
    }
    if (thisCharCode < 97 || thisCharCode > 122) {
      return false;
    }
  }
  const lastCharCode = lowerCaseStr[lastIndex];
  return !(lastCharCode < 97 || lastCharCode > 122);
}

Domain type

GoDaddy makes a lot of different top-level domains available to its customers. A top-level domain is one that goes directly after the last dot (.) in the domain name, for example .com in example.com. To help the users choose from available domains, GoDaddy is introducing a new feature that shows the type of the chosen top-level domain. You have to implement this feature. To begin with, you want to write a function that labels the domains as "commercial", "organization", "network" or "information" for .com, .org, .net or .info respectively. For the given list of domains, return the list of their labels.

Example

For domains = ["en.wiki.org", "codefights.com", "happy.net", "code.info"], domainType(domains) should return ["organization", "commercial", "network", "information"].

/**
*@params   Array<string>
*@returns  Array<string>
*/

function domainType(domains){

}

Solution on Scrimba

Solution

function domainType(domains) {
  return domains.map((domain) => {
    const domainNameComponents = domain.split('.');
    const topLevelDomain = domainNameComponents[domainNameComponents.length - 1];
    switch (topLevelDomain) {
      case 'com':
        return 'commercial';
      case 'org':
        return 'organization';
      case 'net':
        return 'network';
      case 'info':
        return 'information';
      default:
    }
  });
}

Sum of 2

You have two integer arrays a and b, and an integer target value v. Determine whether there is a pair of numbers, one number taken from a and another from b that can be added together to get a sum of v. Return true if such a pair exists, otherwise return false.

Examples

For a = [1, 2, 3], b = [10, 20, 30, 40] and v = 42, sumOfTwo(a, b, v) should return true.

/**
*@params  number[]
*@params  number[]
*@params  number
*@returns boolean
*/

function sumOfTwo(nums1, nums2, value){

}

Solution on Scrimba

Solution

function sumOfTwo(nums1, nums2, value) {
  for (let i = 0; i < nums1.length; i += 1) {
    for (let j = 0; j < nums2.length; j += 1) {
      if (nums1[i] + nums2[j] === value) {
        return true;
      }
    }
  }
  return false;
}

Extract matrix column

Given a rectangular matrix and an integer column, return an array containing the elements of the column^th column of the given matrix. The leftmost column is the 0^th column.

Example

For inputMatrix = [[1, 1, 1, 2], [0, 5, 0, 4], [2, 1, 3, 6]] and column = 2, extractMatrixColumn(inputMatrix, column) should return [1, 0, 3].

/**
*@params  Array<Array<number>>
*@returns number[]
*/
function extractMatrixColumn(matrix, column) {

}

Solution on Scrimba

Solution

function extractMatrixColumn(matrix, column) {
  return matrix.map((row) => row[column]);
}

Tweet Input Component

In this challenge, you are expected to make a Social Media Character Counter! You need to display the available characters LEFT. Using the Keydown event should help you here. When the characters reach 20 and below, we want them to turn red. So we will use Javascript to add that styling to it. If the characters drop below 0, we want the button to be disabled BUT if there are only 0 characters left, we should still be able to tweet.

You can find the HTML, CSS and JavaScript files at the link below.

Solution on Scrimba

Test your agility challenge

Make a counter that increments every 75 milliseconds in the spin() function and display whether the player wins or losses in the stop() function.

Note
Check the HTML, CSS and JavaScript files on Scrimba by following the link below.

Solution on Scrimba

You can also fork the GitHub repository for the challenges in the link below.

nibble0101 / javascriptmas

Beginner-friendly coding challenges in JavaScript.

If you found these challenges useful, feel free to tweet or share them on any other platform. Others might find them useful too.

Higher Order Components in React.

Joseph Mawa — Mon, 23 Nov 2020 15:40:14 +0000

Image by pieonane from Pixabay

Higher Order Functions
Higher Order Components in React
Things to take note of while using HOC
Conclusion
References

In this brief article, I will introduce you to Higher Order Components in react, sometimes written as HOC in brief.

Higher Order Function

For us to understand HOC in react, it is important to understand Higher Order Functions in javascript. According to The eloquent javascript, functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. In javascript, functions are first class citizens. This means a function can be passed as argument to another function, it can be returned from another function and can also be assigned to a variable. In javascript, there a number of builtin higher order functions. The most common ones are the Array methods below:

map
forEach
filter
reduce

In the example below, I have implemented a function which is used for raising a number to a given power. It is a higher order function because it returns a function.

const power = (power) => {
  return (base) => {
    return base ** power;
  };
};

const square = power(2);
const cubed = power(3);
console.log(square(100)); // 10000
console.log(cubed(100)); // 1000000

Essentially, higher order functions are regular functions that do one or both of the following.

Takes one or more functions as arguments
Returns a function

Higher Order Components(HOC) in React

A higher-order component, in react, is a function which takes a component as an argument and returns another component. According to the react documentation,

A higher-order component returns a new component after performing some kind of operation. For example,
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Essentially a HOC transforms the input component into another component.

From the simple definition of a Higher Order Component above, you can immediately notice the similarities between Higher Order Functions such as Array.prototype.map, Array.prototype.filter, Array.prototype.forEach et cetera and Higher Order Components in React.

To illustrate what I am talking about, let me give a contrived example below. It is unlikely you will do this in a real app but it goes a long way in explaining what HOC is.

import React from "react";

function HigherOrderComponent(Component) {
  return class extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  };
}

function SayHello(props) {
  return <p> Hello {props.name} </p>;
}
export default HigherOrderComponent(SayHello);

From the above, you can see that HigherOrderComponent takes Component as parameter. It then returns anonymous class component which renders the component passed as argument to HigherOrderComponent. It is worth pointing out that I have used an anonymous component but you can also name it to increase readability of your code. A component which has been named appropriately can give you an idea of what it does even without looking at its code.

The above component is a HOC but it is such a contrived example that you are unlikely going to use or encounter it in real-world projects. One of the main reasons for using HOC is to add enhancements to the component with functions or data, none of which our component above implements.

One use case of a HOC is to display a loading indicator while fetching data from an API. Below, I have defined a HOC which displays the text Fetching Photos... if this.props.isFetchingPhotos is true otherwise it returns a new component which renders the component passed as argument to the HOC. Notice how the props have been passed on to Component from Component {...this.props}.

withLoadingIndicator.js

import React from "react";

function withLoadingIndicator(Component) {
  class WithLoadingIndicator extends React.Component {
    render() {
      if (this.props.isFetchingPhotos === true) {
        return <p> Fetching Photos... </p>;
      }
      return <Component {...this.props} />;
    }
  }
  WithLoadingIndicator.displayName = `WithLoadingIndicator(${Component.displayName ||
    Component.name ||
    "Component"})`;
  return WithLoadingIndicator;
}
export default withLoadingIndicator;

The above HOC is imported in App.js. It is then invoked with Photos as argument. The returned component is then finally rendered inside App.js.

import React, { useEffect, useState } from "react";
import Photos from "./Photos";
import withLoadingIndicator from "./withLoadingIndicator";
import "./style.css";
const url = "https://jsonplaceholder.typicode.com/photos";

const WithLoadingIndicator = withLoadingIndicator(Photos);

export default function App() {
  const [photos, setPhotos] = useState([]);
  const [isFetchingPhotos, setIsFetchingPhotos] = useState(false);
  const [hasError, setHaserror] = useState(false);
  useEffect(() => {
    async function fetchPhotos() {
      setIsFetchingPhotos(true);
      try {
        const response = await fetch(url);
        const photos = await response.json();
        if (Object.keys(photos).length === 0) {
          throw new Error("Something wrong has happend");
        }
        setPhotos(photos);
      } catch (error) {
        setHaserror(true);
      }
      setIsFetchingPhotos(false);
    }
    fetchPhotos();
  }, []);
  if (hasError === true) {
    return <p> An Error has occurred... </p>;
  }
  return (
    <div>
      <WithLoadingIndicator photos={photos} isFetchingPhotos={isFetchingPhotos} />
    </div>
  );
}

If you have ever used state management library redux, most likely you have come across react-redux which is used for connecting your app to the redux store. The connect function returns another function which is a HOC. The component you want to connect to the redux store is passed to the HOC returned by a call to connect.

  const higherOrderComponent = connect(mapStateToProps, mapDispatchToProps);
  const EnhancedComponent = higherOrderComponent(Component);

Things to take note of while using HOC

Before you start using Higher Order Components, there are certain things you must always be cognizant of. These include:

Higher Order Components must be pure.

You shouldn't perform side effects in HOC and it shouldn't mutate the component passed to it. It should instead return a new component which renders the component passed as argument. A HOC is supposed to compose a component for code reuse. If you are writing a HOC, avoid the temptation to mutate the component passed as argument. This is because once mutated, the input argument's new behaviour will also be reflected outside the enhanced component which makes it non reusable. Instead of mutation, HOCs should use composition, by wrapping the input component in a container component. It is expected HOCs pass on props that are unrelated to its specific concern.

Naming convention for HOC

It is important to choose a display name that communicates to whoever is reading/debugging your code that the rendered component is a result of a call to a HOC. For example if your higher order component is withLoadingIndicator and input component is Component from the example I provided above, then the returned component can use the display name withLoadingIndicator(Component). This will make it obvious that higherOrderComponent(Component) is a result of passing Component to
withLoadingIndicator. This is illustrated in the example above.

Don't invoke HOC inside the render method.

In class components, the render method is invoked whenever a component renders. Invoking the HOC inside the render method like in the illustration below means every time the component is rendered, HOC is invoked. This will affect your app's performance. The best place to invoke the HOC is outside the component. If you are interested in creating a HOC dynamically, make use of the life cycle methods.

render(){
  const EnhancedComponent = HOC(Component);
  return <EnhancedComponent />;
};

According to the react documentation,

React uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from render is identical (===) to the component from the previous render, react recursively updates the subtree by diffing it with the new one. If they are not equal, the previous subtree is unmounted completely.

Since invoking the HOC inside the render method will lead to the creation of a new component on each render, this leads to the unmounting and remounting of the component which makes the component and all its descendants lose their state.

Static methods must be copied over

Sometimes it is important to declare static methods in class components. If you wrap a component on which a static method has been defined inside a HOC, the enhanced component doesn't have access to the static method. Since this is a brief introduction to HOC I won't describe how to go about solving this problem in this article,the react documentation prescribes solutions which you can read about here.

`refs` are not passed

It is common practice to pass props which have been passed to the enhanced component to the wrapped component. However, this is not possible with refs because refs are not handled by React like ordinary props. The solution is to use forwardRef API. If you are not familiar with it, you can read about forwardRef in one of my earlier articles What is forwardingRef and how do you use it?.

Conclusion

In this brief article about HOC, we learned about:

Higher Order Functions and how it is related to Higher Order Components.
Higher Order Components. What HOCs are, when it is necessary to use HOCs and things worth taking note of while using HOCs.

I am glad you have read this article till the end. If you find anything technically inaccurate, feel free to leave a comment below. If you find it useful, consider sharing it on social media or any other platform. Others might find it useful too.

References

React.memo and React.PureComponent

Joseph Mawa — Tue, 22 Sep 2020 09:15:37 +0000

Outline

React.PureComponent
React.memo
References

`React.PureComponent`

In react, components can be defined as functions or ES6 classes. All class components are sub classes of either Component or PureComponent. To understand when PureComponent base class is used for declaring your class component, it is important to understand when a react component defined as a sub class of Component re-renders.

When a class component is a sub class of Component, it is re-rendered whenever:

state changes
context changes
parent re-renders
props change

You can see from the above that a component is re-rendered whenever its parent re-renders though its context, state or props haven't changed. To prevent a component from re-rendering because of its parent's re-render, you can declare it as a sub class of PureComponent. PureComponent implements shouldComponentUpdate out of the box. It does a shallow comparison of props and state. If the state and props haven't changed, react doesn't re-render the component even if the parent re-renders. Since this is a shallow comparison, pureComponent should be avoided if your component is deeply nested because react can produce false-negatives for deeper differences. It should only be used if the component is pure.
According to react documentation:

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Below is how a PureComponent is defined using ES6 class.

class App extends React.PureComponent{
    constructor(props){
       super(props);
       this.state = { };
   }
   render(){
    return <div className = "app"> Hello World! </div>
   }
}

`React.memo`

React.memo is the functional component equivalent of React.PureComponent. It is a higher-order component. If React.memo wraps a component, it memoizes the rendered output and skips subsequent renders if state, props, or context have not changed. It is worth pointing out that React.memo checks for props changes. If the component's state or context change, the component is re-rendered even if the props haven't. React.memo makes a shallow comparison of props. It also takes a function as second argument if you want to have control over the comparison.

React.memo(App, function comparator(prevProps, nextProps){
});

The second argument, comparator, returns true if its arguments are equal and false otherwise. This helps React.memo determine whether to re-render the component or not.

Thanks for reading this article till the end. If you find it useful, consider sharing it on twitter or any other platform. Others might find it useful too and if you notice something which is technically inaccurate, please leave a comment below.

References

React documentation

Passing JSX key attribute to elements in react.

Joseph Mawa — Thu, 10 Sep 2020 11:46:03 +0000

Image by StockSnap from Pixabay

Outline

Introduction
Background to Array.prototype.map
Using Array.prototype.map to map array of data in react
References

Introduction

The focus of this article is on the most common use case of Array.prototype.map in react i.e. mapping array of data to array of elements which requires passing JSX key attribute for uniquely identifying each element from its siblings.

Background to `Array.prototype.map`

If you have used react for some time, most likely you have dynamically created react elements from an array of data using Array.prototype.map. If you are not familiar with ES5 Array method map, you can read about it in the MDN documentation.
In brief:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. MDN

For example if we have an array of first names.

const firstNames = ["Joseph", "Tom", "Maria", "Chris"];

You can use the map method to create another array comprising of the number of characters in the respective names like:

const charInFirstName = firstNames.map((firstName) => firstName.length);
console.log(charInFirstName); //[6, 3, 5, 5]

Using `Array.prototype.map` to map array of data in react.

In the same way you can map an array of elements using ES5 array method map, you can map an array of data to an array of JSX elements in react using Array.prototype.map. It is important to point out that though map is the easiest, recommended and the most commonly used way of doing this, you can also achieve the same result by using for loop or forEach array method.

In the code below, i have created an array of contributors to an open source project.

const contributorsList = [
  { name: "Jane Doe", url: "https://www.fakeurl.io" },
  { name: "John Doe", url: "https://www.anotherfakeurl.net" }
];

In the code below, i have created Contributor component which returns li element with nested a tag and it is saved in Contributor.js file.
Contributor.js

import React from "react";
export default function Contributor(props) {
  return (
    <li>
      <a href={props.url} target="_blank" rel="noopener noreferrer">
          {props.name}
      </a>
    </li>
  );
}

Furthermore i have also created App component which imports Contributor. It then maps an array of contributors to an array of Contributor components.
App.js

import React, { useState } from "react";
import Contributor from "./Contributor";
const contributorsList = [
  { name: "Jane Doe", url: "https://www.fakeurl.io" },
  { name: "John Doe", url: "https://www.anotherfakeurl.net" }
];
export default function App() {
  const [contributors] = useState(contributorsList);
  return (
    <div className="wrapper">
      <ul>
        {contributors.map((contributor, index) => (
          <Contributor
            name={contributor.name}
            url={contributor.url}
          />
        ))}
      </ul>
    </div>
  );
}

The above code will render a list of contributors but with a warning:

Warning: Each child in a list should have a unique "key" prop.

You get the above warning because react expects you to pass a key JSX attribute to Contributor. The value of key should be a string which uniquely identifies each Contributor component. According to the react documentation:

A key is a special string attribute you need to include when creating lists of elements.

Keys help react identify which elements have changed, have been deleted or added. It gives the elements in the array a stable identity. If you don't provide explicit keys to the elements in your list, react will default to using the element indices as keys. In fact passing index as value of key attribute will make the warning disappear because react assumes you know what you are doing.

<div className="wrapper">
      <ul>
        {contributors.map((contributor, index) => (
          <Contributor
            key={index}
            name={contributor.name}
            url={contributor.url}
          />
        ))}
      </ul>
    </div>

Though passing index as value of key attribute makes the warning disappear, it is not recommended to use element indices as key if the order of items in the array will change. This according to the react documentation is because,

it will negatively impact performance and may cause issues with component state.

In the example above, i could generate a unique key on the fly by concatenating the index to the name like:

 <div className="wrapper">
      <ul>
        {contributors.map((contributor, index) => (
          <Contributor
            key={contributor.name + index}
            name={contributor.name}
            url={contributor.url}
          />
        ))}
      </ul>
    </div>

As a rule of thumb, when creating an array of elements using map, the element returned by callback to map must have a unique JSX keyattribute. It is also important to note that key is JSX attribute which is not passed as prop. If you want to access the value of key in your component, then you need to pass it as prop with name other than key. Keys used in arrays should be unique among its siblings. It doesn't have to be unique globally.

Though the main focus of this article is use of Array.prototype.map to create array of elements from data, you can also use for loop or forEach array method to do the same.

Thanks for reading this article to the end. If you find something which is technically inaccurate please leave a comment below. If you find it useful, please consider sharing it on Twitter or any other platform. Others might find it useful too.

References

Portfolio feedback

Joseph Mawa — Fri, 04 Sep 2020 15:37:22 +0000

Hello people

I am kindly requesting you to take a look at my portfolio. I have realized perfection is the enemy of getting things done. I have two versions. One with light theme and another with dark theme. Which one looks more professional and presentable? If there is anything i should add or remove please let me know. If you could go ahead and glance at the projects and comment about them too, i will be grateful .

What is forwarding ref and how do you use it?

Joseph Mawa — Tue, 04 Aug 2020 20:07:27 +0000

Before reading this article, it is very important to familiarize yourself with useRef hook and createRef API. This has been covered in my earlier article useRef hook and createRef API.

Ref forwarding is a technique for automatically passing ref from a component to one of its children. According to React documentation, this might not be necessary in most applications but might be useful for some kinds of components, especially in reusable component libraries.

In the example below App renders Form component.

export default function App() {
  const myRef = useRef();
  return (
    <div className="App">
       < Form ref = {myRef} />
    </div>
  );
}

If you want to reference a DOM element or a class component rendered by Form from App, you can pass a ref to Form component. Form is wrapped in forwardRef so that it passes or forwards the ref to a DOM element or class component it renders.

function Form(props, ref) {
  return (
    <form>
      <input type="text" placeholder="Name" />
      <input type="submit" ref={ref} />
    </form>
  );
}

export default React.forwardRef(Form);

Form takes two parameters. The first parameter is props and the second is ref passed to it from its parent Component App. It then forwards the ref to either a DOM element or a class component it renders which in the example above is the input element. Take note of how Form has been wrapped in forwardRef. The second parameter to Form, ref, only exists if you wrap it inside forwardRefand ref JSX attribute has been passed to it from its parent component. The above example can also be written as:

export default React.forwardRef(function Form(props, ref) {
  return (
    <form>
      <input type="text" placeholder="Name" />
      <input type="submit" ref={ref} />
    </form>
  );
});

The parent component App then references<input type="submit" /> via myRef's current property.

That is a brief summary of how forwardRef is used.

Thanks for reading this article till the end. If you find anything technically inaccurate, please leave a comment below. You can also share it on twitter if you find it useful. Someone might find it useful too.

Reference

React documentation

Lazy state initialization in functional components.

Joseph Mawa — Tue, 21 Jul 2020 19:34:02 +0000

This brief post will focus on lazy state initialization when using useState hook. If you don't know what useState hook is, you can read about it in my introductory article on useState hook Here.

If you want to initialize state in functional components, you can use useState hook. This hook takes the initial state as its argument and it returns an array of two entries. The argument passed is set as the initial state.

const[state, setState] = useState(1)

Sometimes instead of passing a primitive value, an object or an array as argument, you can also pass a function. The value returned by the function passed is used for initializing state.That is referred to as lazy state initialization. Lazy state initialization is necessary if you are performing a computationally expensive process for initializing state. Consider the example below:

import React from "react";

function initializer() {
  return Math.random();
}

function App() {
  const [state, setState] = React.useState(initializer());
  const clickHandler = React.useCallback(() => {
    setState(prev => prev + 1);
  }, []);
  return (
    <div className="App">
      <h1> {state} </h1>
      <h2>
        <button onClick={clickHandler}> Click </button>
      </h2>
    </div>
  );
}

In the example above, initializer is defined outside the component. It returns a random number which is used for initializing state. The initial state is ignored in subsequent renders but the function initializer which is used for initializing it is invoked in every re-render. This might not be a big problem if you are simply returning a random number like in the above example however it causes performance problems if initializer performs a computationally expensive process.

How do we get over this problem?

To solve the problem described above, you can pass a function which calls initializer as an argument, like:

 const [state, setState] = React.useState(() => initializer());

or else pass initializer to useState without invoking it like:

 const [state, setState] = React.useState(initializer);

The above two approaches ensure initializer is invoked on first render but ignored in subsequent re-renders.

Thanks for reading this article to the end. If you found it informative, consider sharing it on twitter or any other social media platform. Others might find it useful too.

References

react documentation

What is useLayoutEffect hook and when do you use it

Joseph Mawa — Sun, 19 Jul 2020 16:42:38 +0000

In this article, we shall look at:

An overview of hooks
Function signature of useLayoutEffect hook
Differences between useLayoutEffect hook and useEffect hook
When to use useLayoutEffect hook
Conclusion
References

An overview of hooks

A hook is a function which enables you use state and other react features without writing ES6 class components. useLayoutEffect hook is similar to the useEffect hook. If you haven't come across the useEffect hook, you can read about it in one of my earlier articles titled what is useEffect hook and how do you use it. The useEffect hook is one of the most commonly used hooks in the React hooks API.

useLayoutEffect function signature

useLayoutEffect hook takes a function called effect as its first argument and an array of dependencies as second argument. The first argument, effect, either returns a cleanup function or undefined. The function signature of useLayoutEffect is illustrated in the code below.

import React, { useLayoutEffect } from "react";
const APP = props => {
  useLayoutEffect(() => {
    //Do something and either return undefined or a cleanup function
    return () => {
      //Do some cleanup here
    };
  }, [dependencies]);
};

You can notice from the above function signature that both useEffect and useLayoutEffect take effect function and array of dependencies as their arguments and return either undefined or a cleanup function.

What is the difference between `useEffect` hook and `useLayoutEffect` hook

The difference between useEffect and useLayoutEffect is in the time when the functions are invoked. To understand when the hooks are invoked, it is helpful to understand that component re-render goes through the following steps. Let us assume we are implementing useEffect hook in our app.

User interacts with App. Let us say the user clicks a button.
Component state changes
The DOM is mutated
Changes are painted on the screen
cleanup function is invoked to clean up effects from previous render if useEffect dependencies have changed.
useEffect hook is called after cleanup.

It should be noted that if a component is being rendered the first time, cleanup function is not invoked because there is no effect to clean up.

The difference between useEffect hook and useLayoutEffect hook is in the timing of their invocation. useEffect hook is invoked after the DOM has been painted. useLayoutEffect hook on the other hand is invoked synchronously before changes are painted on the screen. The sequence of steps outlined above for useEffect implementation can be modified for useLayoutEffect as shown below.

User interacts with App. Let us say the user clicks a button.
Component state changes
The DOM is mutated
cleanup function is invoked to clean up effects from previous render if useLayoutEffect dependencies have changed.
useLayoutEffect hook is called after cleanup.
Changes are painted on the screen

It can be concluded from the above explanation that most of the time you don't need useLayoutEffect. When do you then choose useLayoutEffect over useEffect hook?

When to choose useLayoutEffect over useEffect hook

You can use useLayoutEffect hook instead of useEffect hook if your effect will mutate the DOM. useEffect hook is called after the screen is painted. Therefore mutating the DOM again immediately after the screen has been painted, will cause a flickering effect if the mutation is visible to the client.

useLayoutEffect hook on the other hand is called before the screen is painted but after the DOM has been mutated. The undesirable behavior, of mutating the DOM immediately after painting the screen, described with useEffect hook above can be avoided.

Though replacing useEffect hook with useLayoutEffect may not have a noticeable effect with simple apps, you are strongly advised against doing so (unless the situation warrants it) as stated in the uselayouteffect documentation, to "avoid blocking visual effects". useLayoutEffect hook has its own use cases, so does useEffect hook. Read further about some use cases of useLayoutEffect at the official react documentation.

Conclusion

We have looked at the differences between useEffect hook and the useLayoutEffect hook. Did I miss anything? Feel free to leave a comment below. I will be more than happy to update this article.

Thanks for reading till the end. If you find it useful, consider sharing it on Twitter or any other community of react beginners. Others might find it useful too. You can also follow me on twitter @mjmawa.

References

What is useRef hook and how do you use it?

Joseph Mawa — Wed, 15 Jul 2020 16:23:09 +0000

This is the sixth article of React Hooks series. If you haven't read the first five articles, you can find them at the links below.

Content Outline

Introduction to useRef hook
Purpose of useRef hook
Accessing DOM elements using useRef hook
Persisting values between re-render of component
Using ref with class Components
Summary
References

What is useRef hook?

A hook is a special function which enables one use state and other React features without writing ES6 class components which are generally considered difficult to understand, use and master.
useRef hook is part of the React Hooks API. It is a function which takes a maximum of one argument and returns an Object. The returned object has a property called current whose value is the argument passed to useRef. If you invoke it without an argument, the returned object's current property is set to undefined. The code below illustrates how to invoke the useRef hook in functional components.



const myRef = React.useRef(null);
// You can use a descriptive variable name instead of myRef.

myRef, which is returned by a call to useRef hook is an object which looks like {current: null}. If invoked without an argument, then the returned object is {current: undefined}

What purpose does useRef hook serve?

Some of the use cases of useRef hook are:

To access DOM elements
To persist values in successive renders

Accessing DOM elements

One of the most common use case of useRef hook is to access DOM elements (NOT custom React component). For example if you want to access an input element after it has been mounted to the DOM, instead of using document.getElementById, document.querySelector or any other method for selecting DOM elements like in vanilla javascript, you can use useRef hook. This is illustrated in the example below.



import React from "react";
import ReactDOM from "react-dom";

const App = (props) => {
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    console.log(inputRef.current);
    inputRef.current.focus();
  }, []);
  return (
    <form>
      <input 
        type="text"
        placeholder="Enter Name" 
        name="name" 
        ref={inputRef} />
    </form>
  );
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

In the code above, App component returns a form element. useRef hook is invoked and null is passed as an argument. useRef returns an object, {current: null} which is assigned to inputRef. inputRef is an object whose current property is initially set to null. Since it is passed as value of input element's ref attribute, the value of current property is then set to input DOM element. input element can then be accessed and manipulated via inputRef's current property.

WARNING

Though useRef makes it easy to manipulate DOM elements, you are discouraged from using it willynilly. There are specific use cases where it is advisable to use useRef hook. Read more about them at
React Documentation.

To persist values in successive renders

There are situations where you might want to persist certain values in consecutive renders. Instead of storing these values in state which might cause unnecessary renders, you can store it as the value of useRef's current property since react guarantees that this value is persisted between re-renders. Furthermore, if you want to determine state value from previous state values, it is advisable to use useRef hook to persist them. This is very helpful because in functional components, state is not merged but completely replaced.

Using ref with class components

It should be noted that useRef hook is available only for functional components. If you want to reference a DOM element in class components, you can use React.createRef API. Like the useRef hook in functional components, React.createRef takes a maximum of one argument and returns an object with current property set to the argument passed and undefined if no argument is passed. The object returned by creatRef is stored in an instance property during construction like this.myRef = React.createRef().



class App extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(null);
  }
  componentDidMount() {
    console.log(this.inputRef.current);
    this.inputRef.current.focus();
  }
  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Enter Name..."
          name="name"
          ref={this.inputRef} // or ref = {e => this.inputRef.current = e}
        />
      </form>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

The object returned by calling React.createRef is assigned as value of ref attribute of the DOM element we want to reference. You can also achieve the same thing by using:
ref = {element => this.inputRef.current = element} instead of ref={this.inputRef}.

NOTE

It is worth pointing out that createRef and useRef hook can be used for creating ref in functional components. However, refs created using createRef are not persisted between re-renders. A new ref is always created whenever the component is re-rendered.

You should also note that React will not be notified of any changes to a component's ref.

Summary

In summary, this article looked at:

An overview of hooks and the React Hooks API
Purpose of useRef hook
The useRef hook and how to use it in functional components
Use of createRef API in ES6 class components

Thanks for reading this article up to the end. If you notice anything technically inaccurate, you can comment below. If you find this article useful, you can share it on Twitter so that others also benefit from it.

REFRENCES

useContext hook and context API. What are they and how do you use them?

Joseph Mawa — Sun, 12 Jul 2020 20:20:44 +0000

Content Outline

Introduction to hooks
Prop drilling
How to use context API in class components
1. Create an instance of context
2. Wrap children of parent component (provider of data) inside context.Provider
3. Pass data via value attribute of context.Provider component
4. Access data passed from context.Provider from any descendant of parent component (App) via context.Consumer

useContext hook

References

What is a hook?

A hook is a special function which lets you use functional components without writing ES6 class components. To appreciate the usefulness of useContext hook, it is important to understand the problem it is trying to solve. In the sections below, we discuss how context API is used in both class and functional components.

Prop drilling

In React, data can be passed from a component to its descendants primarily via props. It is not a big deal to pass props from a parent component to its descendants one or two levels deep, but it becomes a mess if components are deeply nested. This problem is illustrated in the code below.

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <ChildComponent name={"Joe"} />;
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <GrandChildComponent name={this.props.name} />;
  }
}

class GrandChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <GreatGrandChildComponent name={this.props.name} />;
  }
}

class GreatGrandChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1> Hello {this.props.name} </h1>;
  }
}

You can see how props have to be passed through all intermediate components from App in order to get to GreatGrandChildComponent. This, according to Kent C. Dodds, is called prop drilling. Prop drilling is undesirable if the intermediate components have no use for the data. Your goal is to have the data sent to a specific component within the component tree. context API was developed to address this problem. It helps in passing data from parent component to child components without drilling through successive descendants via props.

How to use context API in class components

Inorder to use context API in class components, you go through the following steps

Create an instance of context using React.createContext
Wrap children components of provider (component which dispatches data ) inside context.Provider
Pass data via value attribute of context.Provider component
Access data passed from context.Provider from any descendant of parent component via context.Consumer

Create an instance of context

In class components, you can use createContext to create an instance of context. createContext takes context as an argument and returns an instance of the context. Context is an object whose value property holds the data you want to pass. You can also create an instance of context without passing context(data) to createContext. In that case you will pass data via value attribute of context.Provider as explained in the subsequent sections.

import React from "react";
const myContext = React.createContext();

Alternatively, you can also import createContext instead of using React.createContext() like:

import React, { createContext } from "react";
const myContext = createContext();

A call to createContext returns an object which in the case above is assigned to the variable myContext. You can give a meaningful name to instance of createContext instead of calling it myContext One of the properties of myContext object is Provider whose usage is explained below.

Wrap children of parent component (provider of data) inside context.Provider

myContext has a Provider property which can be used inside component which provides data by wrapping siblings of the parent component in it. To illustrate this, let us go back to the previous example. If you want to pass data from App component down the component tree to any of the descendant components, then App is the provider of the data and is a parent to the components below it in the component tree. Simply wrap children of App inside context.Provider. This is illustrated in the code below.

import React from "react";
const myContext = React.createContext();
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "John Doe" };
  }
  render() {
    return (
      <myContext.Provider value={{ ...this.state }}>
        <ChildComponent />
      </myContext.Provider>
    );
  }
}

Pass data via value attribute of context.Provider component

myContext.Provider has an attribute called value which is used for passing data.
In the code above, notice how React.createContext has been invoked. Its invocation returns a context object which is stored in myContext. In the render method of the component (in this case App) which provides the data to be passed down the component tree , you wrap the child component in myContext.Provider and pass the data via value attribute of myContext.Provider. This way, any component which is a descendant of App can access the data as explained below.

Access data passed from context.Provider from any descendant of parent component (App) via context.Consumer

In the sections above, we looked at how to create context and pass data down the component tree via context.Provider. Let us look at how descendants of App in the component tree can access the data passed. myContext, context object returned by createContext has a property called Consumer which you can use to access the data. In the code below we assume GrandChildComponent wants to use data which we passed from App.

class GrandChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <myContext.Consumer>
        {context => <h1> {context.name} </h1>}
      </myContext.Consumer>
    );
  }
}

Notice the child of myContext.Consumer is a function. The function takes the context (in this case myContext) as argument and returns JSX which renders the data passed. This can be done in any component which is a descendant of component from which data was passed. This helps to avoid prop drilling. Though context API solves problem of drilling components to pass data around, it introduces complexity in myContext.Consumer because a function has to be passed as its child. If you want to avoid this complexity, you can use useContext. It should be noted that useContext is a hook, therefore its use is restricted to functional components.

useContext hook

In the sections above, we looked at how context API is used in class components. Dispatching context in both class and functional components is the same. The difference is in the way context is consumed. To use data passed from a parent component via context, you use context.Consumer component in ES6 classes. A function is passed as a child of context.Consumer. The function takes context as an argument and returns JSX which renders the data passed via context.

In functional components on the other hand, useContext hook takes a context object (object returned by React.CreateContext) as an argument and returns the object passed via value prop of Context.Provider. The current context value is determined by the value prop of the nearest Context.Provider in the component tree in case a component has multiple ancestors dispatching data via Context.Provider.

It should be noted that a component which renders data passed via context API will always re-render when the context value changes. The code below is the functional component equivalent of context.Consumer.

   const myContext = React.useContext(context);

You can now access the data passed as value attribute of context.Provider using myContext.

Thanks for reading this article till the end. If you find it informative, you can share it on Twitter. Others might find it useful too. In case you notice anything technically inaccurate, leave a comment below.

References

React Hooks API reference

useCallback and useMemo hooks. What are they and how do you use them?

Joseph Mawa — Thu, 09 Jul 2020 15:49:31 +0000

This article is part of the React hooks series. If you haven't read the other articles, you can find them at the links below.

Content outline

useCallback hook
useMemo hook
References

useCallback hook

A hook is a special function which enables one use state and other react features without writing ES6 class components, according to React hooks documentation.
The useCallback hook is part of the React Hooks API. It takes a callback function and an array of dependencies as arguments. It returns a memoized version of the function passed as argument. If the above definition doesn't make sense, the sections below explain what is useCallback hook, why it is important and how to use it.

In the code below, i have defined two event handlers; eventHandler which we shall later pass as a prop to Child component and clickHandler which is attached as a click event handler on the button element. In React, a component is re-rendered if its state or props change leading to a re-render of its descendants too. For this particular case if we change state of App, its child component Child will also re-render. To prevent Child component from re-rendering if its parent's state changes, i used React.memo. If you are not familiar with React.memo, you can read about it Here. If you now click the button, it will fire the event handler clickHandler which will change state of App. You will see Parent is rendered on the console but not Child is rendered. If we hadn't wrapped Child component in React.memo, changing state of App would make Child component to be re-rendered but this has been prevented by React.memo. This way we can be sure that Child component is only re-rendered due to change in props. You can play with the code Here on Codepen.

import React from "react";
import ReactDOM from "react-dom";

const App = (props) => {
  const [state, setState] = React.useState(0);
  const eventHandler = (e) => {
    console.log(1);
  };
  const clickHandler = (e) => {
    setState((prevState) => prevState + 1);
  };
  console.log("Parent is rendered");
  return (
    <div>
      <button onClick={clickHandler}> click </button>
      <Child />
    </div>
  );
};

const Child = React.memo((props) => {
  console.log("Child is rendered");
  return null;
});

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

You can play with the above code Here on Codepen.

Let us now pass eventHandler as a prop to Child component. Change only one line: <Child />. Pass eventHandler as prop so that we have <Child eventHandler={eventHandler} />.
The above code becomes:

import React from "react";
import ReactDOM from "react-dom";


const App = (props) => {
  const [state, setState] = React.useState(0);
  const eventHandler = (e) => {
    console.log(1);
  };
  const clickHandler = (e) => {
    setState((prevState) => prevState + 1);
  };
  console.log("Parent is rendered");
  return (
    <div>
      <button onClick={clickHandler}> click </button>
      <Child eventHandler={eventHandler} />
    </div>
  );
};

const Child = React.memo((props) => {
  console.log("Child is rendered");
  return null;
});

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

You can play with the above code Here on Codepen.

If you change state of App by clicking the button, Child component will also be re-rendered. Both Parent is rendered and Child is rendered will be console logged. Before passing eventHandler to Child as a prop, a re-render of App doesn't cause a re-render of Child but after passing eventHandler as a prop, Child is re-renderd. This happens because a re-render of App creates a new instance of eventHandler, which has been passed as prop to Child. React will compare instance of eventHandler created for the previous render and for current render. The two won't be equal because a function is an object and two objects tested for equality (strict or non-strict) will only evaluate to true if they have the same reference. For example {} === {}, [] === [] and function(){} === function(){} will all evaluate to false. Strictly speaking, React uses Object.is algorithm to compare eventHandler. This is interpreted by React as change in props resulting in a re-render of Child. This, most likely, is not what you need.

The above behaviour is, in most cases, undesirable. As a result useCallback was developed to fix such problems. It takes a function and array of dependencies as argument. If you pass an empty array, React will always return the same memoized instance of function passed as argument. If an event handler is passed as an argument to useCallback, the same version of the callback is returned in subsequent renders as long as array of dependencies haven't changed. Change eventHandler to:

   const eventHandler = React.useCallback((e) => {
    console.log(1)
  }, [])

If you now change state of App, Child component will not be re-rendered. I hope you notice the empty array passed as second argument. It will ensure the same memoized version of the callback is returned between renders. If you pass an array of dependencies, different memoized version is returned whenever the dependencies change between renders. It should be noted that any value referenced within the callback function (first argument to useCallback) should be passed as a dependency.

useMemo hook

In the above section, we looked at what useCallback hook is and how to use it. It is now time to look at another hook closely related to useCallback, useMemo. The function signature of useMemo is similar to that of useCallback. The difference is that useMemo returns a memoized value while useCallback returns a memoized callback function. Both take a function as first argument and an array of dependencies as second argument.
useMemo hook is used for performing operations which are computationally expensive (Takes a long time to perform or a lot of computer memory). If the dependencies do not change, memoized value will always be returned. If you want the computation to be performed once then pass an empty array.

The code below illustrates how useMemo hook is used.

const App = (props) => {
  const [count, setCount] = React.useState(0);
  const memoizedValue = React.useMemo(() => {
    return Math.random(); //This should be an expensive computation not just generating a random number
  }, []);
  console.log(memoizedValue);
  const clickHandler = (e) => {
    setCount(count + 1);
  };
  return (
    <p>
      <button onClick={clickHandler}> Click </button>
    </p>
  );
};

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

You can play with the above code Here on Codepen.

In the code above, i passed a function which generates and returns a random number(ONLY for illustration). Since i passed an empty array as a dependency, the first random number is memoized and returned on every re-render of the component. If i had not passed a dependency, the random value is computed on every render of the component. The value returned is computed again if the dependencies change

Note

You are strongly advised against using useMemo hook willy-nilly. useMemo hook is used if you are peforming an expensive computation. Do not use it for generating random number like i did in the example. It is meant to illustrate how to use useMemo hook.

Thanks for reading up to the end. If you find anything technically inaccurate, you can comment below and if you find the article enlightening, share it on Twitter or any other social media platform/community. Others might find it useful too.

References

What is useEffect hook and how do you use it?

Joseph Mawa — Mon, 29 Jun 2020 20:58:27 +0000

Content

Introduction
What arguments are passed to useEffect hook?
First argument to useEffect
Return value of effect
Second argument to useEffect
Passing a function as a dependency
References

This is the third post of my react hooks series. If you haven't looked at the first two, follow the links below to look at them.

Introduction to useEffect hook.

A hook is a function which enables you use state and other react features without writing ES6 classes.
useEffect hook is part of the react hooks API. If you are familiar with react life cycles, useEffect hook is equivalent to life cycle methods componentDidMount, componentDidUpdate and componentWillUnmount combined. In fact, according to the React documentation on Hooks, useEffect hook was developed to address some of the challenges posed by life cycle methods of ES6 class components. Since this post is about what effect hook is and how it is used, i won't go into why it was developed. You can look at it Here.
In React functional components, we perform side effects such as fetching data from an API or manually updating the DOM inside the useEffect hook.

What arguments are passed to useEffect hooks?

useEffect is a function which takes two arguments. The first argument passed to useEffect is a function called effect (You can guess why this hook is named useEffect) and the second argument (which is optional) is an array of dependencies. Below is an illustration of how it is used.



import React, { useEffect } from "react";
import { render } from "react-dom";
const App = props => {
  useEffect(() => {
    console.log("Effect has been called");
  }); //Second argument to useEffect has been omitted
  return <h1> Hello world! </h1>;
};  
const root = document.getElementById("root");
render(<App />, root);

First argument to useEffect

The first argument, called effect, is a function which either returns a function (called cleanup) or undefined. effect is executed when the component is mounted (on first render) and whether it is executed in subsequent updates is determined by the array of dependencies passed as the second argument.

Return value of effect argument

From the Previous section , we said the first argument to useEffect is a function called effect. effect takes no parameters and it MUST return either a function or undefined. If it returns a function, then the function returned is called cleanup. cleanup is executed before calling effect (to clean up effects from previous render). If you are curious about why and when cleanup is necessary, look at an explanation in the React documentation. Since effect returns either a function or undefined, it is not uncommon to see effects without cleanup.

Second argument to useEffect

The second argument to useEffect is an array of dependencies . If you want to control when effect is to be executed after mounting the component, then pass an array of dependencies as the second argument. dependencies are values defined outside useEffect but are being used inside useEffect like:



     function App(){
         const[state, setState] = useState(0);
          // state is defined here
         useEffect(() => {
              console.log(state); 
              //value of state is used here therefore must be passed as a dependency
         }, [state])

     }

React compares the current value of dependency and the value on previous render. If they are not the same, effect is invoked.
This argument is optional. If you omit it, effect will be executed after every render. If you want effect to be executed only on first render, you can pass an empty array.



     useEffect(() => {
       console.log("Effect has been called");
}, []) // Empty array as dependency, useEffect is invoked once

Dependencies can be state or props. It should be noted that any value defined outside useEffect but inside the component, has to be passed as a dependency if you are to use it inside useEffect. This is illustrated below.



  function App(props) {
     const [count, setCount] = React.useState(1);
     // count and setCount are defined inside component(App) but outside useEffect
     useEffect(() => {
       //count is being used inside useEffect. Therefore must be passed as dependency.
       console.log(count);
}, [count])
}

Passing a function as a dependency

You might be wondering if you define a function outside useEffect and invoke it inside effect, do you need to pass it as a dependency?
For exampe:



 function App(props){
    const [data, setData] = useState(null);
    const fetchData = () => {
         //fetch some data 
    }
    useEffect(() => {
    fetchData(); //Invoked inside useEffect
}, [fetchData])

}

It is not recommended to define a function outside and invoke it inside effect. Above case leads to fetchData being invoked on every render because the dependency passed is a function and functions are objects. React will compare fetchData for previous and current render and the two will not be the same hence triggering a call to effect.

According to React documentation on useEffect hook,

It’s difficult to remember which props or state are used by functions outside of the effect. This is why usually you’ll want to declare functions needed by an effect inside of it. Then it’s easy to see what values from the component scope that effect depends on:

You can also move the function inside the effect so that it doesn’t need to be in its dependency list.

Thank you for reading this far. This is a brief introduction to useEffect. There are lots of things about useEffect hook i have not touched in this article. It takes some time getting used to it. If you want to deeply understand useEffect, look at the references below. If you find this article useful, share it on Twitter. Someone could find it useful too. If you find anything technically inaccurate please feel free to comment below.

Forem: Joseph Mawa

JavaScriptmas interview type coding challenges

Introduction

nibble0101 / javascriptmas

Beginner-friendly coding challenges in JavaScript.

Javascriptmas

Challenges

Candies

Deposit profit

Challenges

nibble0101 / javascriptmas

Beginner-friendly coding challenges in JavaScript.

Higher Order Components in React.

Table of contents

Higher Order Function

Higher Order Components(HOC) in React

Things to take note of while using HOC

Higher Order Components must be pure.

Naming convention for HOC

Don't invoke HOC inside the render method.

Static methods must be copied over

refs are not passed

Conclusion

References

React.memo and React.PureComponent

Outline

React.PureComponent

React.memo

References

Passing JSX key attribute to elements in react.

Outline

Introduction

Background to Array.prototype.map

Using Array.prototype.map to map array of data in react.

References

Portfolio feedback

What is forwarding ref and how do you use it?

Reference

Lazy state initialization in functional components.

How do we get over this problem?

References

What is useLayoutEffect hook and when do you use it

An overview of hooks

useLayoutEffect function signature

What is the difference between useEffect hook and useLayoutEffect hook

When to choose useLayoutEffect over useEffect hook

Conclusion

References

What is useRef hook and how do you use it?

Content Outline

What is useRef hook?

What purpose does useRef hook serve?

Accessing DOM elements

To persist values in successive renders

Using ref with class components

Summary

REFRENCES

useContext hook and context API. What are they and how do you use them?

Content Outline

What is a hook?

Prop drilling

How to use context API in class components

Create an instance of context

Wrap children of parent component (provider of data) inside context.Provider

Pass data via value attribute of context.Provider component

Access data passed from context.Provider from any descendant of parent component (App) via context.Consumer

useContext hook

References

useCallback and useMemo hooks. What are they and how do you use them?

Content outline

useCallback hook

useMemo hook

References

What is useEffect hook and how do you use it?

Content

Introduction to useEffect hook.

What arguments are passed to useEffect hooks?

First argument to useEffect

Return value of effect argument

Second argument to useEffect

`refs` are not passed

`React.PureComponent`

`React.memo`

Background to `Array.prototype.map`

Using `Array.prototype.map` to map array of data in react.

What is the difference between `useEffect` hook and `useLayoutEffect` hook