JavaScript Ramblings

Sign in Subscribe

Latest

Best practices for working with API keys in the frontend

Ever wondered if it’s ok to have your API key bundled with the frontend, public for anyone who uses your app to see? You know you should never put secrets in the UI. But then you see people bundling their keys with the UI all the time (Firebase API

Create a React and Typescript app with Webpack

In a previous article, I went over how you can setup a simple React app with just Webpack and Babel. But what if you also want to enable Typescript for your project? This article goes over how to add Typescript support to a simple React + Webpack project. Step 1: Install

Dockerizing a React app

So you have a React app. And you want to serve it through Docker. Let's do that! At the end of this tutorial, you'll have a Docker container running your app that you can deploy as you see fit 👌 We're going to start from an existing app - a barebones

Creating a React app with Webpack

Simple step by step walkthrough of setting up a React app with Webpack

Authentication with Nodejs and JWTs - a simple example

When it comes to JWTs, most tutorials help you build a full implementation in Node. However, they rarely stop to show just the basics - just the esssential parts that need to be there for JWT authentication to work, and nothing more.

How to check if your component rerendered - and why!

If you're like me, you're probably using console.log a lot to check the React rendering lifecycle of your components 😅 When it rerendered, why - was it a setState or something else ?! - or even just to get a better handle of React fundamentals. This can work fine at the

Should you switch to useReducer or is useState enough for your needs?

The useReducer hook is usually recommended when the state becomes complex, with state values depending on each other or when the next state depends on the previous one. However, many times you can simply bundle your separate useState statements into one object and continue to use useState. So when is

Should you deep clone nested properties?

You already know you're not supposed to mutate state directly when you update the state in React. However, what if one of the members of the object you're updating is a reference? Do you have to create a new version of that object/array as well? const [order, setOrder] = useState(

How to use useState hook in React with Typescript

I recently stumbled upon this question on Stack Overflow: I am trying to make a login form in react with typescript. But setEmail method is not accepting value. It says Argument of type 'string' is not assignable to parameter of type 'SetStateAction'. What should I do to solve it? If

React not batching your setState updates? Here's what you can do about it

Say you're calling two state update functions, one after the other const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); // on receiving the API response setIsLoading(false); setData(data); Depending on whether your code runs as part of an event handler or inside a regular function, this will trigger

Are you logging the state immediately after updating it? Here's why that doesn't work

Did you ever stumble upon a situation where it seems no matter what you do, your state does not get correctly updated? import React, { useState, useEffect } from 'react' const PokemonList = () => { const [pokemons, setPokemons] = useState([]); useEffect(async () => { const data = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=10`).then(response

Using yarn symlinks to share code between apps

If you're working on multiple apps and you want to share code between them - for example common utils, data types or UI components - there are several options available. I was recently browsing a reddit thread about monorepos and sharing code between multiple apps and someone mentioned: In my

Continuously deploy a React App to GitLab Pages

If you're looking for a simple way to deploy a CRA app everytime you push new changes, Gitlab Pages can be a great way to do this. By the end of this article you'll learn how to: * setup a GitLab CI pipeline to build the app on every new commit

Three ways to reuse commands across Gitlab jobs

As soon as your pipeline grows a little bit beyond basic, it's common to get into a situation where a lot of the commands you run in each job are the same. So how can you reduce this duplication? And should you? In general, it's ok to have a bit