React

I’ve added TypeScript to several projects I’ve worked on. In this post, I’d like to discuss why I think TypeScript is essential and document my expectations around it. ...

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

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

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