Kyle Shevlin

React and modern JavaScript gives you the freedom to structure your React projects however you want. Learn how I structure mine.

A lot has happened for me in the first half of 2021 and I need to take a moment to try and process some of that.

I recently did a code review for an aspiring developer and instructed them to “get rid of the ‘magic values’ in their code.” It dawned on me that it might not have been obvious what I meant, so I figured I would take a few moments, and paragraphs, to explain.

A short explanation on how I use `React.useMemo` to stabilize values for re-renders.

Symbolic logic, the study of reducing arguments to an algebraic notation, can be useful knowledge for debugging and reasoning about programs.

I find Sets and set theory to be a fascinating concept, and one that I find more and more useful as time goes on. I've wanted to write an introductory post on the topic for a while now and hope it might inspire a similar interest in Sets for you.

Learn the concept of a tuple, an ordered, finite list of items that represents an implicit key/value store, and where you might already be using them in JavaScript.

Learn how to conditionally use React Hooks by conditionally rendering a "renderless component".

Learn how to debounce or throttle a callback function with React hooks while avoiding an exhaustive deps ESLint error

Learn how to use React Context effectively in your web applications by using custom hooks and memoization.

With the facade pattern, we're able to hide details "under the hood", changing them when necessary without affecting the API exposed by the facade and consumed by the rest of your application.

If you're using React Hooks, I want to show you a pattern for using them that I think will improve the legibility and organization of your codebase. Let's apply encapsulation to the use of React Hooks.

Typically, functions are written for their reusability, but I want to convince you that the reason to reach for a function is to encapsulate a concern.

Disclaimer: This might be a bad idea.

Let's kick it old school and create a custom React hook that takes a callback second argument for setState.

Recently, I needed to do some debugging to improve a few components that were rerendering unexpectedly. In that process of research and trial & error, I came away with a few useful hooks that I want to share with you.