Kyle Shevlin is a software engineer based in Portland, Oregon, who cares deeply about quality in code, writing, and craftsmanship. He focuses on continually improving his skills and helping other developers do the same, while balancing his professional life with competitive golf, gaming, and community-driven learning.
128 articles from this blog
Explains how to correctly implement debounced and throttled callbacks in React using useMemo instead of useCallback to satisfy ESLint dependency rules.
A guide to using React Context effectively, covering its purpose, creation, and best practices to avoid common pitfalls.
Explains the Facade design pattern in JavaScript, focusing on managing dependencies and simplifying complex APIs for better code maintainability.
Argues for encapsulating React hooks in custom hooks to improve code readability, maintainability, and intention clarity.
Argues that encapsulation, not reusability, is the primary purpose of functions in programming, using a budget summary example.
A tutorial on creating a custom React hook that mimics the callback functionality of the old setState method from class components.
A guide to creating custom React hooks for debugging component re-renders by tracking prop and state changes.
A guide to implementing makeshift pattern matching in JavaScript using switch statements, inspired by functional languages like ReasonML.
An introduction to JavaScript generator functions, explaining their syntax, the yield keyword, and practical use cases.
Argues that using multiple boolean props in a component is a code smell, suggesting a single enum prop as a better alternative.
A guide to the correct mental model for React's useEffect hook, explaining why the dependency array shouldn't be used as a conditional and how to avoid common pitfalls.
A tutorial on building a Tic-Tac-Toe game in React, covering game state, grid logic, and component structure.
A guide to using React.memo to prevent unnecessary component re-renders in React applications, improving performance.
Explains memoization, a programming technique that caches function results to improve performance by trading space for time.
Explains the three primary ways to manage state in React applications: locally, parentally, and remotely.
A technical guide on implementing conditional guards within a useReducer-based finite state machine in React.
A guide on abstracting React component logic into reusable custom hooks to reduce code duplication and improve maintainability.
Extends a React useReducer finite state machine to handle infinite contextual data, similar to XState's context, for managing dynamic state like form inputs.
Explores representing a state machine as a simple string, detailing the parsing logic and rules needed for conversion.
A guide to implementing a finite state machine pattern using React's useReducer hook, with a practical light bulb component example.
