How to render components with asynchronous data by Recoil selector and React.suspense

Index

  • Declare a global state with atom of Recoil
  • Use state in a component with useRecoilState
  • Asynchronous datas handling in a global state with selector of Recoil
  • Render a component with Asynchronous datas with React.suspense

Before we start,

Declare global state with atom of Recoil

What is atom? Atom is a…

Easy way to check react bundle size in browser

Index

  • Project and package.json
  • Lottie-web for rendering JSON animation
  • Analyze my bundle size by webpack-bundle-analyzer
  • Bundle size before and after using Lottie

Project and package.json

My project use gzip to compress my cra bundle size.

And this is my dependencies in package.json.

Lottie-web for redering JSON animation

I need lottie-web for json animation file about loading indicator. When designer…

How to add provider(Kakao) to Next auth? First, You need KAKAO REST KEY. And then, edit Redirect_uri, Finally Edit next auth API. Please check git repository for all of it.

This post is in series, How to deploy side project for free!

  1. Nextjs with Kakaotalk(Oauth 2.0) login
  2. How to connect Nextjs with database by Prisma?
  3. Docker with nextjs to deploy on EC2
  4. Nextjs with NGINX on EC2 by Docker-compose
  5. Get free domain(at freenom) and Deploy side project

Prerequisites

Before read this…

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