/* Code Comments */55 posts tagged with "react"
polymorphic accessible react components for visually hidden elements
2022-11-28
|~1 min read
|194 words
I was working on a project recently where I wanted to make sure that my icon links were accessible. I found Kitty Giraudel’s great blog post…
utils vs helpers
2022-11-28
|~1 min read
|109 words
In his blog post about his preferred file structure for React projects, Josh W Comeau distinguished between utility and helper functions…
vs code: react functional component code snippet
2022-11-28
|~2 min read
|211 words
I found myself making a lot of new React components recently and decided to finally create a code snippet to help me move more quickly. To…
react design patterns: higher order components
2022-11-28
|~4 min read
|714 words
I’ve been working wtih HOCs again after a bit of a hiatus. In the interim, I’d forgotten a lot of what I’d previously learned and learned a…
higher order components in react
2022-11-28
|~2 min read
|347 words
Imagine you have a prop that you want to be passed all the way through to the DOM. If you try and pass through a prop that isn’t…
debugging: $refreshsig$ is not defined
2022-11-28
|~4 min read
|645 words
Story Time I have a React library that’s bootstrapped with TSDX. TSDX ships with a convenient “Example” app which can be used to test the…
snowpack: experimenting with a new build tool
2022-11-28
|~7 min read
|1238 words
Snowpack is a new(er) addition to the build tools available on the front-end. I had the opportunity to start a new project recently and I…
typescript: usereducer revisited
2022-11-28
|~4 min read
|673 words
Last time I wrote about using React’s with Typescript I ended up relying on Type Guards to get my actions typed and ended with an claim…
react: discriminated unions and semantic composability
2022-11-28
|~3 min read
|446 words
I’ve written in the past about composability and polymorphism in the past and it’s a concept that continues to interest me. I was speaking…
react: scroll to the top of page on transition
2022-11-28
|~2 min read
|225 words
I’m currently working on a single page app with React that uses React Router. When navigating between “pages” (that is the URL changed and…
typescript: typing react components to accept children
2022-11-28
|~2 min read
|356 words
I was working on some React projects recently and wanted to to make sure that my components could accept - the default behavior. There are…
typescript: using generics in jsx
2022-11-28
|~3 min read
|432 words
I’ve been working on mastering generics for a few years at this point. While I’m making progress, it’s certainly still a work in progress…
managing http requests: a comparison between thunks, xstate,and hooks
2022-11-28
|~5 min read
|879 words
When it comes to managing the current status of an HTTP request, a web developer has a number of options at their finger tips. One of the…
linking libraries: react-redux
2022-11-28
|~3 min read
|426 words
I’ve written in the past about linking a library to an application where both use React and the problems that can ensue - specifically an…
linking libraries: react hooks
2022-11-28
|~5 min read
|822 words
Update: A very similar problem can occur when using . I wrote about it in Linking Libraries: React-Redux Edition. Setting The Stage I…
getters & setters
2022-11-28
|~1 min read
|84 words
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get the use of getters seems to be much more common within the…
react: rendering markdown
2022-11-28
|~2 min read
|234 words
I’m working on a little side project I’ve been noodling on for a while now and one feature I wanted to add was markdown support with a live…
olo-dashboard-feature-flags-react
2022-11-28
|~2 min read
|333 words
To get a feature flag to the front end in Dashboard: New feature flag? Add it. Add the feature flag to within the New Feature Flag? Add it…
miragejs: basic setup in react
2022-11-28
|~3 min read
|454 words
We’ve been using MirageJS to mock out the APIs on our frontend apps and after playing around with it for a few weeks, I’m starting to really…
react: spreading children vs cloneelement
2022-11-28
|~4 min read
|621 words
I recently came across some code making use of the function from React to pass along the children in the render function. Here’s a small…
querying with apollo: passing arguments
2022-11-28
|~3 min read
|559 words
Yesterday, I wrote about querying with Apollo. If you haven’t read that, I suggest starting there as it serves as the basis for the files I…
querying with apollo: render props vs hooks
2022-11-28
|~5 min read
|806 words
After we’ve hooked up our Apollo client to React1, we can begin to query the server. Before Hooks, this was done using Render Props.2 Today…
setting up apollo to work with react (and nextjs)
2022-11-28
|~4 min read
|770 words
Things we’ll be covering: Creating an Apollo Client Connecting the client to React Creating An Apollo Client I’m working in NextJS, so my…
form validation: preventdefault and onsubmit vs onclick
2022-11-28
|~4 min read
|780 words
A little over a year ago, I first discovered the power of and and wrote about it Better Form Submissions with Event.preventDefault and…
learn to defer, not share: revisiting shared ui control with react
2022-11-28
|~2 min read
|209 words
In yesterday’s Shared Control Of UI In React Components I wrote about how it can often be useful to want to share control over a component’s…
sharing control of ui with react components
2022-11-28
|~4 min read
|613 words
Update: I wrote a follow up in which I suggested a more idiomatic approach to this problem through deference of control. React makes it…
back to the basics: html head tag
2022-11-28
|~4 min read
|627 words
When you manage a web-app fully with React, it’s easy to forget that there’s HTML involved. You add the tag to the body, give it a as a…
inferring generics with typescript
2022-11-28
|~5 min read
|870 words
Recently, I needed the ability to track which items within a collection had been selected. As I thought about the problem, it felt like a…
highlight changes in chrome
2022-11-28
|~1 min read
|177 words
When React Dev Tools v4 landed the feature to highlight updated components disappeared. It’s true that focusing only on re-renders can be…
routing basics with reach router
2022-11-28
|~5 min read
|842 words
Imagine you have a Single page application but you want to allow your users to navigate to different pages within the app. I wanted to learn…
react’s strictmode
2022-11-28
|~1 min read
|148 words
As React continues to upgrade its API, there are parts the team is working to deprecate. If you want to make sure your app stays up to date…
useeffect basics
2022-11-28
|~2 min read
|346 words
The hook in React is scheduled to run after render. There are three different categories of running it: Without dependencies With no…
polymorphic presentations with styled-components
2022-11-28
|~3 min read
|520 words
Let’s say we’re building a simple web form with a twist: we want the submit to only appear if all of the fields are valid. In all other…
setting state in react components
2022-11-28
|~2 min read
|306 words
There are three main types of React Components. There are also (with the introduction of hooks in 16.8) three different ways to define / set…
conditionally render components in react
2022-11-28
|~3 min read
|505 words
I still remember when I first learned how to conditionally render my React components. It was a light bulb moment. I began seeing new…
intersection observer and react-intersection-observer
2022-11-28
|~2 min read
|223 words
I was reviewing a project recently that made use of the library and was fascinated by the simplicity of the API - particularly the hooks…
usereducer with typescript
2022-11-28
|~6 min read
|1108 words
When does it make sense to use a reducer vs a simple state value with React’s Hooks? There’s no hard-and-fast rule, but the React team…
supporting submit on enter
2022-11-28
|~3 min read
|539 words
When asking users for their input, it’s often a pleasant user experience to allow them to submit the form by pressing “Enter”. In fact, that…
getting refs to sync with container state
2022-11-28
|~3 min read
|438 words
I was working on a project recently which was using Refs in order to integrate with a third-party library. My mental model for refs are that…
an even more basic react app tutorial
2022-11-28
|~4 min read
|607 words
Recently, I walked through building a basic React App.1 In retrospect, I could make it even more basic by removing any package managers…
getting a basic react app up and running
2022-11-28
|~7 min read
|1399 words
Update: I’ve now found an even more basic way to write a React app and I put together a tutorial in a post, An Even More Basic React App…
using callbacks to reverse data flow in react
2022-11-28
|~2 min read
|391 words
React’s one way data flow makes it easy to reason through, but sometimes the controlling component needs to know what’s going on inside. For…
state, reducers, and usereducer in react
2022-11-28
|~6 min read
|1058 words
To date, I’ve struggled to understand reducers. Terms like reducers, actions, dispatch, all blurred together and even though I could use…
using isvalidelement to ensure a node is an element in react
2022-11-28
|~2 min read
|312 words
I am trying to reduce an array of React Nodes to an array of React Elements. Specifically, I’m trying to extract the title prop from those…
useref vs. usestate and unnecessary renders
2022-11-28
|~3 min read
|505 words
Today, I found a wonderful side-effect of : it doesn’t re-render components when it changes. This was ideal for my situation because I…
errors, loading, and happiness: a pattern in react
2022-11-28
|~3 min read
|531 words
If I’m working on a React application that is trying to render data based on an asynchronous call, there are three common cases I should…
lessons in typescript: extending 3rd party libraries and reading type definitions
2022-11-28
|~4 min read
|612 words
Using third party libraries is great when they do exactly what you want them to do. When it comes to extending them, however, it can get…
incrementing state in functional components
2022-11-28
|~2 min read
|282 words
I was recently trying to understand Material UI’s component. In looking through their implementation of the Horizontal Linear Stepper, they…
using variables to make interchangeable react components
2022-11-28
|~3 min read
|444 words
Using Variables To Make Interchangeable React Components I’m still making tweaks to the Stepper project I wrote about previously (here and…
create a spinner & add a loader in react
2022-11-28
|~2 min read
|250 words
Using two libraries, and , I learned a new simple way to create a component (i.e. a spinner) to be used while an image is being loaded in…
hooks, async, and the joy of new problems
2022-11-28
|~5 min read
|843 words
When all you have is a hammer, every problem looks like a nail. When approaching new problems, it’s easy to fall into old ways of doing…
react lifecycle methods - a primer with react 16
2022-11-28
|~3 min read
|490 words
One of the things that I didn’t appreciate when I first started using React was how helpful the different lifecycle methods were. I got away…
react key props and why you shouldn’t be using index
2022-11-28
|~5 min read
|904 words
If you’ve ever mapped over an array in React, you’ve likely seen this warning: Warning - Children Should Have Unique Key I wanted to…
error handling: uncaught typeerror: this.searchdb is not a function
2022-11-28
|~2 min read
|248 words
While working on a React project, I came across the following error: is a method on my component that is called when certain buttons are…
debugging create-react-app
2022-11-28
|~5 min read
|917 words
In an effort to learn React, I pulled up React’s introductory tutorial. Almost immediately I hit turbulence. I was in the setup of the…