React is my favourite JavaScript library for building front-end applications, and I sometimes use it for templating static sites too - like this blog!
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
If you want to join React components together with JSX or another component - for example, in a list or breadcrumb - you might get [object Object] when using Array.join(). Here's what you can do instead.
Written by Codemzy in ReactJS on June 9th, 2023
What's the difference between `isLoading` and `isFetching` in React Query? When would you use one and not the other? Let's figure it out and show a nice loading spinner to our users.
Written by Codemzy in ReactJS on April 28th, 2023
In the blog post, we'll create a useDebounce custom hook to delay function calls with React's useCallback and a little time travelling magic. We will also cancel our debounced function when the component unmounts or dependencies change.
Written by Codemzy in ReactJS on February 15th, 2023
Here's a custom hook for adding an autosave feature to ReactJS, without ending up with stale data. It uses setInterval to trigger the save, useEffect to keep things clean, and useRef to keep your save functions fresh.
Written by Codemzy in ReactJS on December 16th, 2022
This post will cover how you can specify which queries to invalidate in ReactQuery with queryClient.invalidateQueries(). Here's how to target single queries, multiple queries, active queries and inactive queries.
Written by Codemzy in ReactJS on October 13th, 2022
If you try to render an array of objects in ReactJS, you might run into errors. Because ReactJS can't render the object. But you can loop over the array and turn it into something ReactJS can render, like a string or JSX.
Written by Codemzy in ReactJS on August 31st, 2022
Although isMounted is deprecated in ReactJS, maybe you need it to prevent memory leak errors in your application. Learn why there are better ways to solve this problem, and how to create an isMounted hook with useEffect if you still need one.
Written by Codemzy in ReactJS on April 13th, 2022
Moving over to ReactJS hooks? Good choice! But how do you use useEffect like componentDidMount? And how do you clean up your code afterwards? Learn how to create custom componentDidMount and componentWillUnmount hooks with useEffect.
Written by Codemzy in ReactJS on April 6th, 2022
Is Webpack telling you your bundle sizes are too big? Is all of your ReactJS code in a single app.js bundle? In this blog post, I look at why you should try code splitting and how to split your code up into smaller chunks.
Written by Codemzy in ReactJS on March 23rd, 2022
Do you or your users get a ChunkLoadError after your deploy updates? If you use code splitting and dynamic imports, old code can cause this issue. Here's how to fix it in React.lazy() with a custom function.
Written by Codemzy in ReactJS on March 16th, 2022
Do you need to create a drag and drop file upload component in React? This blog post has you covered. Build a component that listens to drag events, handles drops, and falls back to the traditional file picker.
Written by Codemzy in ReactJS on March 2nd, 2022
Want the convenience of easy access to a sticker header, without it getting in your way all of the time? Here's how you can hide your sticky header when scrolling down, and get it back as soon as you scroll up!
Written by Codemzy in ReactJS on February 23rd, 2022
In this blog post, I share a ReactJS hook you can use to listen to the scroll direction of the browser. Is the user going up or down the page? Now you can always know! Unless they stay still!
Written by Codemzy in ReactJS on February 9th, 2022
Do you want to build a static website without learning another javascript framework? If you already know ReactJS, you can use it to create your static HTML content. It's quick and easy, and you won't even need to configure Webpack to do it! Use renderToStaticMarkup().
Written by Codemzy in ReactJS on November 17th, 2021