React is my favourite JavaScript library for building front-end applications, and I sometimes use it for templating static sites too - like this blog!
The `className` prop can get pretty messy in React once you start adding multiple conditional class names to it. Here's how I use an array to avoid extra whitespace and confusing code.
Written by Codemzy in ReactJS on March 21st, 2024
You can invalidate an active query to get it to force refetch with React Query. Here's how you can force refetch after a mutation, or on a button click, to check for updated data.
Written by Codemzy in ReactJS on December 4th, 2023
In React Query, the cacheTime and staleTime options impact how long data gets stored on the client and how often it's re-fetched from the server. Let's look at the difference between cacheTime and staleTime - and how changes to one can impact the other.
Written by Codemzy in ReactJS on November 21st, 2023
If browsers save old code bundles for your React app, it can create errors and problems loading your app for your users. Here are some cache-busting tips for React in production.
Written by Codemzy in ReactJS on November 13th, 2023
This is how I store paginated queries when I also want users to know the total results count and total number of pages for paginated data.
Written by Codemzy in ReactJS on November 9th, 2023
One of my favourite features of Trello is how you can drag and drop your cards around, so here's how I created a Trello-like drag-and-drop kanban board from scratch in React.
Written by Codemzy in ReactJS on October 20th, 2023
Drag and drop is a pretty cool feature to add to your web applications. But it can be a little tricky. With some trial and error, here's how I built a reusable drag-and-drop component for React (and all the code!).
Written by Codemzy in ReactJS on October 19th, 2023
Here's how to scroll to an element after you render a component in React with `useRef` and `useEffect`. And if you need to do it more than once, I've included a custom `useScrollOnRender` hook you can use.
Written by Codemzy in ReactJS on September 29th, 2023
Here are three ways you can pass a function as a prop in React, with and without parameters - all while avoiding infinite loops!
Written by Codemzy in ReactJS on September 15th, 2023
In this blog post, I'll show you how to fix React rendering `0` in your `&&` conditions by using `!!` to convert it to a Boolean. But I'll also explain why it works so you can avoid this problem in the future!
Written by Codemzy in ReactJS on September 11th, 2023
Here's how I built a reusable pagination component with ReactJS, with next and previous buttons, that works with or without knowing the total number of pages available.
Written by Codemzy in ReactJS on September 1st, 2023
Here's how I build a simple select all checkbox with React using the `useState` hook and lifting the state up out of the checkbox component. Now we can check all and uncheck all too!
Written by Codemzy in ReactJS on August 21st, 2023
If your React checkbox isn't working, or it takes two clicks to change the state, here are some common bugs and easy fixes!
Written by Codemzy in ReactJS on August 17th, 2023
Checkboxes are pretty common form elements, and in this blog post, I'll show you the two ways to check and uncheck a checkbox in ReactJS.
Written by Codemzy in ReactJS on August 16th, 2023
If you need to update your state when a prop changes, the easiest way to do this is React is with the `useEffect` hook. In this blog post, we will look at three options including `useEffect, the `key` prop, and removing state.
Written by Codemzy in ReactJS on August 14th, 2023
Ever wanted to use dynamic component names or use a variable to say which type of component or element you need? Let me introduce you to the `as` prop!
Written by Codemzy in ReactJS on August 8th, 2023
Dropdowns are a common UI element that your React app will (probably) need. Here's a simple ReactJS dropdown menu that you can use, with code examples and how I built it.
Written by Codemzy in ReactJS on August 7th, 2023
How can you `useRef` for multiple elements or inputs? What about adding new elements dynamically? Here's how you can create a `useRef` array or object for adding and removing multiple elements in your component.
Written by Codemzy in ReactJS on August 3rd, 2023
You can force ReactJS to remount a component using the `key` prop, resetting state, values, and data. The `key` prop can help you remount components on route URL and prop changes, and here's how I use this magical prop!
Written by Codemzy in ReactJS on July 24th, 2023
I created a custom hook to get and set query parameters in the URL query string using React Router and its location object. Here's how (and why) I built it, with all the code you need to use it.
Written by Codemzy in ReactJS on June 26th, 2023