JavaScript Ramblings

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.

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

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

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

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

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.

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

When using Webpack to bundle your application for production, where you put your dependencies in package.json doesn't matter - as Webpack will simply follow all import statements, starting with the entryPoint. So what do you do? Can you just put your dependencies anywhere?

It's happening again. You know you need to upgrade a package, but you're not sure what version is the latest and whether it will break your code or not 🙈 Let's walk through upgrading @storybook/react for a project. First, check where you standWhat version

If you’ve ever wondered how to deploy your React app once it’s ready, you probably know that figuring this out can become confusing really fast. Most articles go over detailed instructions on how to configure nginx, how to configure reverse proxies. But

The performance of an application is critical to its success. Having a fast application will lead to a better user experience and to an increased adoption rate. But what does it mean that an application is fast? And how does one measure the performance

Semantic UI is a fantastic UI library and the fact that you can use plain React components to compose your layouts makes it a great fit for React applications. When it comes to customizing the styles though, it’s a whole different story. The

Invariant violation: Could not find "store" in either the context or props of "connect(MyComponent)". Either wrap the root component in a Provider or explicitly pass store as a prop to connect(MyComponent)" So, you're writing a unit test for one of your Redux

TL;DRMedia queries with styled components work the same as in CSS! const CardWrapper = styled.div` display: flex; flex-direction: row; @media (max-width: 768px) { flex-direction: column; } `; If you want a more involved example with defining different device sizes, continue below. What we'll buildWe'll start from

Updating create-react-app could mean two things: You want to update your global create-react-app install to make sure new apps you create use the latest boilerplateIn this case, you don’t need to do anything! When you run create-react-app, it always creates the project with

Think for example Twitter's search box. As the search results come in, a dropdown menu renders and user can select any of the items. How can I build this in react? Let's try to built this kind of component! To keep things simple, I'll