Photo by Mathew Schwartz on Unsplash

Hooks + Requests 👨‍🔧

There is no single right answer for handling requests with React hooks. After a year of experience with hooks, I have come up with a pretty efficient pattern for that. You can adapt or modify the pattern for your own use.

A Useful Hook 🍭

I like to use Axios for making requests and I will make a useful hooks for handling cancellation tokens for it. You can modify this hooks to use fetch api with AbortController.

Useful hook for Axios

Hooks in the Hook 😵


Photo by Puk Patrick on Unsplash

Create-React-App is maintained by the React’s creator, Facebook and it is one of the most popular boilerplate for React projects. As project grows, the compilation becomes slower and you will want to make a build faster. There are countless ways to improve this after ejecting from CRA, but today, I would like to introduce a way to make it faster without ejecting.

Update to latest CRA version

Using latest release of react-scripts may help you boost the build speed.
How to update CRA to latest version.

Build with Rust

swc is the blazing fast JavaScript/TypeScript transpiler written in Rust.

From the swc official page,

It’s 20x faster than…


Photo by Ricardo Rocha on Unsplash

Why Canceling is Needed? 🔍

When a React component is unmounted, belonging AJAX requests using Fetch/Axios no longer need to be executed. Sometimes, a not canceled request from an unmounted component may trigger some unexpected and unwanted updates.

Fetch

Above code will try to make a request to url and alert the stringified response data after 5 seconds.

It will actually never be able to make the request because controller.abort() is executed before the inner function of the setTimeout runs.

Axios

This code is doing identical task as the above example using Fetch . The only difference is that while Fetch is using AbortController for…


Photo by Vincentiu Solomon on Unsplash

In TypeScript 3.7, there are some interesting new features like optional chaning and nullish coalescing. When I tried to install and configure to try using new features, there were some syntax highlight breaking and my VS Code was not able to detect the new features correctly. Now I know how to resolve them and I would like to share them.

📃Prerequisite

When I was writing this post, I used VS Code v1.40.1 and Node.js v12.13.0.

🎷Install TypeScript

Go to your project root directory and run this.

npm install typescript@3.7.2

The latest TypeScript version is 3.7.2 now. If you want…


Photo by Carlos Muza on Unsplash

I will guide you to make a Node.js app that crawls tweets from Twitter and calculates a keyword’s sentiment analysis trend in last 24 hours. I will make the code to be generic to use any keywords but in the sample code, I will use “Bitcoin” as the keyword.

Beware that these settings may or may not work if you are using different versions of packages. I used Node.js v10.16.0 for running this.

Prerequisites

Let’s start! 🚀

You…


Node.js came out in 2009 and it has been 10 years already. There has been lots of languages and frameworks and there will be in the future. Hipster engineers prefer newer and cooler stuffs. However, there are still strong reasons to learn Node.js in 2019.

Strong Concurrency


Node.js + Nginx = ❤

Setting up Node.js App with Nginx is ideal for running node app in production. As Express’ performance best practice performance states, letting Nginx to handle cached requests, compressions and serve static files is recommended. Node.js is well known to be good at heavy IOs rather than handling static file serving and CPU intensive compressions.

I assume that the static files are at /usr/src/app/public and Express uses 3000 port.

Remove Parts from Express

You may have static files serving configured in Express. You don’t need that any more since Nginx will handle that.

Find a line looks like this and remove it.

app.use(express.static('public'))

Also you…


Photo by Fotis Fotopoulos on Unsplash

I will describe the way to configure TypeScript unit testing with test coverage. I used TypeScript, Mocha, Chai and Istanbul for setting those up. I will guide you by creating a simple codes, belonging test codes and configurations that work altogether.

Beware that these settings may or may not work if you are using different versions of packages. I used Node.js v10.16.0 for running this.

Let’s start! 🚀

You need create a directory, mkdir sample && cd sample and
run npm init -y on it.
It will give you a package.json file like this.

Now it is time to install the needed…

Jeong Woo Chang

Software Engineer

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