React

I’ve written before about the two competing ways to import React, but after React 17, you don’t need either. React used to be mostly imported as a default: import React from 'react'; Then, we were advised by core team members to drop the default because it was going to be deprecated: import * as React from 'react'; I’m late to the party learning that with the JSX transform introduced in React 17, you don’t need to import React at all to use JSX. You only need to import other functions you might use. ...

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.

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. ...

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.

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

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. Let’s get right to the code. Below, I’ll explain what every line is doing. import * as React from "react"; import { useState } from "react"; const App = () => { const [timer, setTimer] = useState(); const toggleTimer = () => { if (timer) { clearInterval(timer); setTimer(undefined); } else { const timerId = setInterval(() => console.log("tick"), 1000); setTimer(timerId); } }; return <button onClick={toggleTimer}>{timer ? "Stop" : "Start"}</button>; }; export default App; Here’s the summary: this code creates a button that reads “Start”. On click, that changes to “Stop”, creating a timer with setInterval ticking once per second. This tick behavior could represent anything, including: ...

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. Consider a user avatar component that shows the user’s initials. You might see one in the upper right of your screen right now. What pieces of a user model should we pass to an Avatar component to achieve this? The initials? ("JW") The first and last names of the user? ("Jake Worth") Or should we pass the entire user object? (user) Read on to see each in detail. ...

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. Besides React, I’ve used this in Vue, Nuxt, and Gatbsy applications. Any JavaScript framework that’s loosely opinionated about directory structures could receive this structure. ...

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? I found it in Chrome on window.history.state: > window.history.state < { "usr": { "pageTitle": "Redirected!" }, "key": "31ytq582", "idx": 4 } And cleared it using replaceState: > window.history.replaceState({}, '') < undefined > window.history.state < {} Window.history docs