cached-fetch optimizes your app’s data fetching, whatever your app platform is

If you have developed React app, you probably heard of ‘SWR’. SWR caches fetched data. So the app calls the same fetch, cached data is returned without network communication.

But it only works React hooks. If you want to use SWR, you must call the ‘useSWR’ API. And also you can customize only the ‘fetch’ part, like that.

const fetcher = (...args) => fetch(...args).then(res => res.json());
function App() {
const { data, error } = useSWR('/api/user/123', fetcher); ...

You just can input two parameters path and fetcher. You can’t understand how caching works.

cached-fetch can works even the development…

React Navigation is a library that helps with routing and navigation.

It is easy to use and it supports both ios and android. It is also a customizable, and extensible platform. In this post, we’ll try to use two types of navigation. Stack and Tab with Typescript.


At first, we’ll start with a React Native(RN) environment with typescript.

  1. We can build it easily with the react-native command.
$ npx react-native init reactNavigationTutorial —-template react-native-template-typescrip

2. Install the react-navigation package.

$ yarn add @react-navigation/native

3. Iinstall dependencies.

$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

4. Add the following at the…

React Native(RN) is a mobile application framework created by Facebook. It is like React so, making it easy for Javascript developers to develop mobile apps easily.

In this post, we’ll make an RN app using typescript.

Set up the environment

Before start, we need to install some dependencies. RN runs above both android and ios OS. So environments suitable for each os must be set. In both environments needs Node, Watchman, and Typescript.

Official RN page recommends using Homebrew. Note that, the Watchman is a tool for watching changes in filesystem.

$ brew install node
$ brew install watchman
$ npm install -g typescript


We made basic util functions map, filter, reduce, and so on. In this posting, we’ll make additional functions using ‘Generator’.


The Generator object is returned by a generator function. It’s an iterator so we can access its value sequentially.

function* generator() {
yield 1;

yield 2;
yield 3; console.log('four');}const iterable = generator();console.log(iterable);
----------------------------- Console -----------------------------Object [Generator] {}
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }

Looking at the code…

Last time, we prepared ingredient to make pipelining functions. Let’s implement it in earnest.


Pipe function ties up pure functions. It takes plural functions, and return a single function. The returned function executes input functions in order.

For example, look at this code.

test('pipe', () => {  const squareOnlyOdds = pipe(    (collection) => filter(collection, value => value % 2),    (collection) => map(collection, value => value * value),  );  expect(squareOnlyOdds([1, 2, 3, 4, 5, 6])).toStrictEqual([1, 9, 25]);});

We put two functions. The first one takes a collection and returns the result filtered only odd numbers. The second function likes the…

Until now, we made some pure util functions(ex. map, filter).

Today we’ll be going to make three functions, ‘reduce’ and ‘curry’. They’ll be good tools in the next step, pipelining.

1. Reduce

Reduce function takes the collection, iteratee, and accumulator(optional, initial value). And it returns just one accumulated result of running each element in collection thru iteratee.

Accumulator, it’s the 3rd parameter is an optional value. If there's no, the first element of the collection will be the initial value.

The iteratee is called each element of the collection. …

Last time, We made two functions map and filter. We combined them and implemented the user’s logic simply.

In this chapter, we’ll be going to extract their common logic and make it safer. The common concept of them is that it traverses collection and do something. So we can make a function called ‘each’.

function each(collection, iteratee) {  for (const value of collection) {    iteratee(value);  }}
module.exports = each;

‘each’ function traverse the taken collection and execute the iteratee function for each values.

So we can use the ‘each’ function in ‘map’ and ‘filter’. We should just call the…

Functional Programming

Before We Start With Function Programming

Before we start with Functional Programming, let’s talk about Modern software programming. In modern society software products are increasing both quantitatively and qualitatively. Hardware performance continues to improve as well.

To satisfy users who become more demanding, our software should provide more fun, more creative, and more convenient user experience.

Modern software handles larger volumes, reflects real-time changes more immediately, and needs to be more accurate. So the complexity of the code to implement this is higher.

There are paradigms to make a program that is responsive to usability, performance, scalability, and planning changes.

Function Programming

Functional Programming(FP) is a paradigm that…

Today, we’ll connect our Next.js app to MySQL database and develop an authentication feature.

1. Setup the MySQL database

At first, I’ll prepare MySQL database to connect.

If you already installed that, you can skip this step. Just create a database and table named ‘users’ in MySQL.

Let’s install the ‘mysql’. I used ‘homebrew’ package manager.

$ brew install mysql

It is not necessary to use this method. Depending on the OS or your preference, you can use different styles.

After installation, create a database and ‘users’ table. I used ‘MySQLWorkbench’.

Photo by Caspar Camille Rubin on Unsplash

In this posting, we’re going to study about ‘useRef’ hooks and ‘forwardRef’ features while making the side menu in React App.

1. setup app and make SideMenu component

At first, setup the react hooks development environment by ‘create-react-app’.

$ npx create-react-app forward-ref-tutorial --template typescript

After the app is created, we can see the App component written by typescript.

Woohyun Jang


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