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.

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

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.

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

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

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.

fetch('www.url.com/1');
fetch('www.url.com/2');
fetch('www.url.com/3');
fetch('www.url.com/4');
fetch('www.url.com/5');
// ...

My first approach was using…

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…

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. …

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…

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.

npx create-react-app carousel 

Install styled-components as well.

npm i styled-components

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. …

Get sum of two arrays inside an array

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

For instance,

function(arr1, arr2) { // ... }

• 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

function solution1(arr1, arr2) {
  let answer = [];  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

function solution2(arr1, arr2) {
  return arr1.map((_, i) => arr2[i].map((_, j) => arr1[i][j] + arr2[i][j]));
}

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

function solution3(arr1, arr2) {
  return arr1.map((a, i) => a.map((b, j) => b + arr2[i][j]));
}