-
How-to: React hooks: useReducer
What is useReducer in React Hooks?
“An alternative to useState.”
In the official React docs, useState is listed as basic hooks while useReducer is at additional hooks. Since useReducer is more powerful,…
-
How-to: Use AutoSuggest in React
Let’s learn how we can use the React Autosuggest library that will show a dynamic list of countries that is being loaded from a JSON endpoint. We will be using…
-
How-to: Build Forms in React with Formik
“Formik is the world’s popular open-source form library for React and React Native.” – https://formik.org/
Building and managing forms can be a pain especially when you are just building it from…
-
Using: Mobx with React
As a developer, you’re constantly looking (I know I am!) for ways to question your life choices (or the career choices, at least!) less frequently. And in this case, any…
-
What is: The Promise.all & Promise.any in JS
A promise signifies an operation or an event that hasn’t been fulfilled yet. And as such, two things could happen: either a promise fulfilled or a promise broken.
What is: Promise.all
Simply,…
-
How-to: Using Mapbox GL in React app
What is Mapbox GL?
Mapbox allows us to create interactive maps and visualize geographic data.
Getting started:
Install a simple create-react-app
Install react-map-gl
Before we go into our project file, we need to format our…
-
How-to: Intersection Observer API and React
What is: Intersection Observer API
Intersection API allows us to see when a DOM element is visible on the screen.
In the past, it’s quite hard to detect the visibility of an…
-
How-to: Using Refs in React
“Refs provide a way to access DOM nodes or React elements created in the render method.”
👉🏼 Think of refs as a bridge or a toll bridge.
Refs make it possible…
-
What is: React.useEffect and its lifecycle
First render, then effect!
“The Effect Hook lets you perform side effects in function components.” reactjs.org
useEffect handles the ‘side effect’ change that is triggered by a change in your component…
-
What is: React.lazy & Suspense
React 16.6 brought code-splitting to a new level. Webpack defines code-splitting as a “technique of splitting your code into various bundles which can be then loaded on demand or in…