How to keep DRY principle with HOC in React Hooks?

Higher Order Component

A custom hook is so powerful so they can replace higher-order component (HOC) in most case after react hooks were released. But the HOC is still useful.

Problem

For instance, this pattern might be familiar with you when fetching data. List component gets data as props from parent component. if data is loading, we display an indicator. In case of having an error can be handled by the same way. If neither both cases, we display something with mapped data. This is cool, right?


Two ways to implement an infinite scroll in React Hooks

You might have heard a lot about an infinite scroll. Nowadays, this technique is so popular in many applications which consume massive amounts of data, especially social media app like twitter, facebook, etc. Today, we are going to implement an infinite scroll with React Hooks.

What is infinite scroll?

Infinite Scroll is a technique that automatically adds the next page as the user scrolls down through content, more content is loaded. User don’t need to wait for pages to preload. So infinite scroll can provide user a better experience.

Pagination vs Infinite scroll — www.smashingmagazine.com

For example, first page is only loaded at first time but next page is loaded…


Using lodash-debounce or axios-cancellation in functional component

Have you an experience like this when you send an api call with input element? Every time user types something, it sends an api call to server. It is good practice if we can prevent to send unnecessary api calls. It will reduce http requests to server and optimize components because of reduced unnecessary re-rendering.

Example

Solution

We can achieve this easily with lodash-debounce or axios cancellation!

Lodash-debounce

Lodash is a JavaScript library which provides utility functions for common programming tasks using the functional programming paradigm — Wikipedia


How to avoid too many requests error when using Promise.all()?

To avoid too many requests, you can fetch data in delay with await and loop and update data using setTimeout().

How to avoid too many requests in javascript?

Recently, I encountered an 429 error(Too many requests) when I was trying to fetch data from multiple endpoints at once with Promise.all(). So today, I want to introduce how I solved this issue.

Situation

I was in charge of creating a chart which shows data in real time. I had to fetch data from 10 endpoints and update these per 5 seconds. For example, my endpoints were like below.

My first approach was using…


The journey to become a frontend developer

Today, I want to share my journey to become a frontend developer. It took almost a year to become a frontend developer. First of all, I will begin to introduce my background.

So, Who am I?

I am Suyeon kang and 24 years old. Before diving into the journey, my story goes back to high school. I wasn’t such a smart and earnest student. Actually, it was the opposite. But, at some point, I decided to go to university. Because I thought it would be fun. In that year, I enrolled the Seoul Woman University.

In hindsight, The reason I went to the university…


Create ‘Redux-like’ global state with useContext and useReducer in React.

React Hooks API is officially released in React 16.8. We are going to explore how to use useContext and useReducer together, and how to use them as Redux-like. We had no choice but to use Redux or other libraries before for state management tool. But after react hooks are introduced , we can manage our state within react itself.

What is useReducer?

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. …


Exploring about useContext hook

What is useContext hook?

What is useContext and when to use it?

React Hooks API is officially released in React 16.8. Today we are going to explore how to use useContext. useContext hook allows passing data to children elements without using redux. It’s an easy alternative to Redux if we just need to pass the data to the children elements.

I am going to introduce how to use useContext in two ways. First, create a folder named contexts. Second, create file named somethiContext.js. Naming is up to you.

Example 1

Using useContext with custom hook

I created a file named themeContext.js. I also created custom hook in this example in order to consume easily in child component.

To create…


Build an image slider with React hooks

We are going to build this carousel

A image slider is an effective way to display multiple images in one place. Today, we are going to build an image slider using hooks in react. It will be easy peasy. Are you ready, sir?

Installing packages

First step, just install react. I am going to use create-react-app.

Install styled-components as well.

Write App.js

Index represents a current number where you are among images. They are like a counter. You can save width of image slider which contains images. xPosition is responsible how much image slider should be moved. …


Source: Programmers

An algorithm a day

Get sum of two arrays inside an array

Write a function which returns sum of two arrays inside an array.

For instance,

  • arr1: [[1,2],[2,3]]
  • arr2: [[3,4],[5,6]]
  • Return [[4,6],[7,9]]
  • arr1:[[1],[2]]
  • arr2:[[3],[4]]
  • Return [[4],[6]]

Solution

Solution 1: Use nested for loop

  for (let i = 0; i < arr1.length; i++) {
let temp = [];
for (let j = 0; j < arr1[i].length; j++) {
temp.push(arr1[i][j] + arr2[i][j]);
}
answer.push(temp);
}
return answer;
}
solution1([[1,2],[2,3]], [[3,4],[5,6]]); // Return [[4,6],[7,9]]

Solution 2–1: Use nested map

Solution 2–2: Use nested map (Another version)


Source: Programmers

Today We are going to get Greatest Common Divisor and Least Common Multiple using javascript.

Greatest Common Divisor

Euclidean algorithm, or Euclid’s algorithm, is an efficient method for computing the greatest common divisor of two integers, the largest number that divides them both without a remainder. It is named after the ancient Greek mathematician Euclid, who first described it in his Elements.

We can use Euclidean algorithm to get GCD. It can be easily achieved with modulo(%) operator. For instance, let’s say you get GCD of 1112 and 695.

For Instance,

First, You get a remainder of lager number divided by smaller number. Then get…

Suyeon Kang

Hello World.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store