We have heard about ego a lot. But what does ego actually mean? The terminology sounds confusing and abstract. Its meaning even differs based on context. Put simply, ego means “I” in Latin. It first appeared in Sigmund Freud’s theory, who was an Austrian neurologist. He believed that ego comes from personality which distinguishes humans from animalistic one or having self-awareness one. When I first heard about ego, it sounded abstract to me but soon after I figured out the origin of the term, it absolutely made sense. It is a very intuitive word. The reason many people are confused…

Let’s use barrel for more readable code

Ilearned recently called barrel that is simple but useful import/export strategy. If you are working on huge project, so you have to handle a bunch of imports statement, barrel might be a good solution for you.

So, what is barrel?

A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.

So when a barrel is useful? Let’s consider below scenario. Let’s say you are building a table component and it has three sub components. Then a folder structure is like below:

Table (folder)

  • TableA.tsx

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.


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?

function List({ dataStatus }) {
const { loading, error, data } = dataStatus…

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 —

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.



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


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.


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.

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

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