Typescript

tldr: this CodeSandbox demonstrates a way to fetch state via a context only when required, eliminating unnecessary renders. Overview The React Context API has made accessing state anywhere in the component tree (and writing clean code without prop drilling) easier than ever before. This article: examines a typical pattern for sharing state using the Context API, and discusses performance implications of the above pattern, and proposes a simple modification using the useRef and useCallback hooks to eliminates unnecessary renders.

Higher-Order Components are “functions that take a component and return a new component”, and while they are not part of the React API, “they are a pattern that emerges from React’s compositional nature” (React docs). HOCs can be used to avoid repeated code in many scenarios such as: showing a loader, while waiting for data, conditionally rendering components, managing common user-interactions states, providing components with specific styles, and more generally, providing a component with any prop.

Javascript’s logical OR || and logical AND && operators are useful in contexts other than creating if, else, while etc. statements, but there are some edge cases that that I see many devs (myself included) getting caught out by. This article explores common pitfalls, and provides recommendations for: using ?? instead of || to define values with a default fallback, and using && to conditionally render JSX components only when required props are defined.