React on Jake Worth

Import React and React 17 JSX Transform

Mon, 01 Dec 2025 18:21:26 -0500

I’ve written before about the two competing ways to import React, but after React 17, you don’t need either.

Re-render Child Component By Changing Key

Tue, 05 Mar 2024 13:29:38 -0500

Today I had a situation where I wanted a child component to re-render on command. The solution I found was to to put a key on it, and then change the key when the re-render is desired.


const Parent = () => {
 const [childKey, setChildKey] = useState(0);

 const rerenderForm = () => {
 setChildKey(childKey + 1);
 }

 return (
 <>
 <button onClick={rerenderForm} type="button">Rerender the form!</button>
 <Form key={childKey} />
 </>
 )
}

In this example, which the button is clicked, our childKey is incremented. To paraphrase the React docs, when the key changes, React “loses track” of the form. And because of the new key, at the same time React sees a new form; a re-render has occurred.

Conditional Props

Thu, 22 Feb 2024 11:42:56 -0500

Passing props conditionally a component makes sense in many situations. Imagine a select box that receives an isDisabled prop that disables the input. Maybe we only want to set it if it’s true. For one, it’s a bit cleaner than setting it to its default false much of the time. And maybe we want to select a certain default value in that same scenario.

Enough theorizing! Here’s the code:

<Select
 options={itemOptions}
 {...(someCondition && { isDisabled: true, defaultValue: [itemOptions[0]] })}
/>

Let me explain the magic.

Join React Components With Comma

Thu, 22 Feb 2024 11:24:35 -0500

Want to connect a list of React components with a delimiter, like a comma? Imagine a sentence of:

Link A, Link B, Link C.

How could we programmatically achieve this in React?

Here’s one answer, inserting a comma before all but the first list item:

{items.map((item, index) => (
 <React.Fragment key={item.id}>
 {index > 0 && ', '}
 <a href={`/items/${item.id}`}>{item.name}</a>
 </React.Fragment>
))}

Lots of other good suggestions in this Gist.

Link Externally With React Router's Link

Fri, 15 Dec 2023 11:45:30 -0500

React Router’s Link component isn’t just for internal links; it can work like an anchor tag, too, sending users outside the application. Use reloadDocument prop to get this behavior.

<Link reloadDocument to={'https://reactrouter.com/en/main/components/link'}>Link docs</Link>

docs

How to Create a Timer or Polling in React with setInterval

Thu, 29 Dec 2022 00:00:00 +0000

Have you ever wanted to create a timer in a React app? This could be in support of a UI timer or polling. In this post, I’ll explain how to create a timer effect in a React application using hooks and setInterval.

What Are the Tradeoffs of Passing Objects as React Props?

Mon, 27 Jun 2022 00:00:00 +0000

A common React pattern is to pass an object as a prop. Let’s consider the ways this can be used and tradeoffs of each.

Organizing React Components

Mon, 23 May 2022 00:00:00 +0000

You’re creating a React app, and want to organize your components. Or maybe you’re working in a legacy codebase, with many components in one directory, and you want to better organize them. In this post, I’ll document an approach to this problem that has worked for me.

Clear React Router's Location State

Thu, 02 Sep 2021 11:32:04 -0400

The return of React Router’s useLocation hook has a key called state which contains values passed during a redirect or navigation. But where is that state stored by the browser, and how do we clear it?