Thinking in React Hooks

React introduced hooks one year ago, and they’ve been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks. The code-flow visualisations between the class component and function […]

react-use – Browser APIs as React Hooks

react-use is a collection of React Hooks that wrap many browser APIs and functions. Want to track the geolocation of a device? Use useGeolocation. Want to read the battery status? Use useBattery. Etc. import {useBattery} from 'react-use'; const Demo = () => { const batteryState = useBattery(); if (!batteryState.isSupported) { return ( <div> <strong>Battery sensor</strong>: […]

React: Forget about component lifecycles and start thinking in effects

Yesterday, while at a workshop, React Hooks (intro here) became the subject of discussion between participants. Someone in the audience asked how to easily map the classes+lifecycle way of thinking onto hooks, as she had trouble doing so. In short, my recommendation was to no longer think in lifecycles but to think in effects, as […]

React Hooks: When to useMemo and useCallback

Insightful post by Kent C. Dodds on the costs and benefits of React’s useMemo and useCallback. We hear a lot that you should use React.useCallback to improve performance and that “inline functions can be problematic for performance,” so how could it ever be better to not useCallback? Just take a step back from React and […]

Making sense of React’s useEffect

Today Dan Abramov published an extensive deep dive into useEffect. The issue that many devs (who, including me, have been using componentDidMount before) are having, is that they now need to unlearn a few things It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that […]

Making setInterval Declarative with React Hooks

Dan Abramov’s blog Overreacted is pure gold and contains a ton of information. Take today’s post β€œMaking setInterval Declarative with React Hooks” for example, in which he explains why setInterval and Hooks (which should be released in today’s planned React 16.8 release) don’t play that nice together out of the box. // This won’t work […]

useHooks(🐠) – Easy to understand React Hook recipes

Hooks are an upcoming feature that lets you use state and other React features without writing a class. This websites provides easy to understand code examples to help you understand how hooks work and hopefully inspire you to take advantage of them in your next project. useHooks(🐠) → πŸ’β€β™‚οΈ Not familiar with Hooks? The announcement […]