Forem: Koen van Gilst

Did you forget to wait something async in your test?

Koen van Gilst — Fri, 19 Nov 2021 00:00:00 +0000

Attempted to log “TypeError: Cannot read properties of null (reading ‘URL’)

It’s one of those dreaded, time consuming flaky errors that everyone working with Jest has had to deal with.

The first part of the error is quite clear. Apparently there was still something going on after my test has finished. But what? Problem with this particular error was that it didn’t happen every time (so timing issue?) and it was generally logged after all my tests had run. So, no clue which test was causing it.

The full stacktrace was:

    Attempted to log "TypeError: Cannot read properties of null (reading 'URL')
        at Object.exports.setup (src/node_modules/jsdom/lib/jsdom/living/generated/XMLHttpRequest.js:62:12)
        at new XMLHttpRequest (src/node_modules/jsdom/lib/jsdom/living/generated/XMLHttpRequest.js:101:22)
        at dispatchXhrRequest (src/node_modules/axios/lib/adapters/xhr.js:44:19)
        at new Promise (<anonymous>)
        at xhrAdapter (src/node_modules/axios/lib/adapters/xhr.js:24:10)
        at dispatchRequest (src/node_modules/axios/lib/core/dispatchRequest.js:46:10)
        at Object.defaultQueryFn [as queryFn] (src/src/providers/queryClient.ts:19:7)".

As often with these errors the cause was pretty simple and the solution even simpler.

I’m using React-Query for my api requests, which is a fantastic tool that offers so many functionalities out of the box. One of its features is the prefetching data you know a user is gonna need.

And that’s what I recently added. After the page had fully loaded the frontend starts prefetching some of the other options in a dropdown, so that when the user selects one of the other options the results are there instantly!

Problem was that in some tests these prefetching calls where still running after the test has finished.

In my setupTests.ts file I have the following call to start with a new React Query slate for every test:

afterEach(() => {
  queryClient.clear()
})

Which is great if you want test isolation, but in this case it was causing errors, because the prefetching calls where still running when the query client got cleared.

The solution to this problem is simple and effective:

afterEach(async () => {
    await queryClient.cancelQueries();  queryClient.clear();
});

After every test this will first cancel any queries that are still running and then clear the queryClient.

Problem solved!

Code Colocation is King

Koen van Gilst — Sun, 14 Nov 2021 00:00:00 +0000

One of the things I struggled with when I started out as a programmer was where to put my code. It was not something I could easily find in tutorials and for a long time I wondered why everyone was so focused on how to get framework X to do Y, when all I wanted to know was where to put the code that does Y.

Turns out that “where to put code” is one of the hardest things in software engineering and there are no silver bullets. That’s part of the reason why there are so few easy tutorials on this subject.

Most of the code structuring patterns out there (the MVC pattern or patterns recommended by libraries) make sense in their own way, but they often fail to tell you what to do in day-to-day cases. For instance, when you have a simple utility function that’s only used in one place, where should you put it? In the global /utils folder?

Over the years I’ve learned that the following principle helps to structure code in way that’s easy to understand and maintain: keep the code that changes together close together.

This means that if you have a helper function that’s specific for the feature you’re writing in featureA/Table.tsx it’s a good idea to keep this function close at hand. So put it either inside the Table.tsx file or right next to it if you have several helper functions. This way, when you have to change or understand the functionality of featureA, all the code you need is close at hand.

For this blog post I’ve chosen Code Colocation is King as a motto, but the principle is more often called the principle of promixity :

The principle of proximity focuses on how well organised your code is with respect to readability and change. Proximity implies that functions that are changed together are moved closer together. Proximity is both a design principle and a heuristic for refactoring hotspots toward code that’s easier to understand.

— Software Design X-Rays by Adam Tornhill

So think about the Proximity Principle the next time you’re in doubt:

whether it makes sense to move a function to the global helpers folder
where the tests of the component you’ve just written should live
whether component styling should be in a global /styles folder, or next to the implementation
if the code that manages state should be moved to a separate file with all the other state updates

Like I said at the beginning of this post: There are no silver bullets for structuring code. And the proximity principle does not always tell you exactly where to put code. But when you’re in doubt it tells you to keep code close to where it’s relevant, until you’ve found a good reason not to do so anymore.

Of Bundles and Barrels

Koen van Gilst — Sun, 17 Jan 2021 00:00:00 +0000

Until recently I’ve been an unequivocal fan of so called barrel files. They work like this:

// src/components/index.js
export * from './Foo'
export * from './Bar'
export * from './FooBar'

Which allows you to use components like this:

import { Foo, Bar, FooBar } from 'src/components'

Short and sweet! For this reason I’m also a happy user of the VSCode plugin Auto-barrel which helps with creating/updating these barrel files.

I did recently discover, however, that this pattern can have unwanted side effects. Re-exporting all your imports in an index file can result in large bundle sizes.

I gave it a try on one of the projects I’m working on (using Next.js) and lo and behold: Removing the barrel in the /components/ui folder reduced the initial bundle size by more than 35kb. The culprit: In the ui folder was a RichTextEditor component of 35 kB. Since it was re-exported this was included on every page using a component from the ui folder.

So be careful what you put in your barrels, if you care about bundle size!

Using Svelte to create a scroll video effect

Koen van Gilst — Wed, 18 Nov 2020 00:00:00 +0000

In this tutorial I’ll show you how svelte’s bind command can be used to create a cool scroll video effect with very little code. The effect we’ll be creating plays a video when the user scrolls up or down. On my blog is a gif of how this looks on the NYTimes website

Note: the effect itself is a lot smoother than the gifs 😂. Another example can be found here). The effect is also sometimes used on product landing pages. On my blog is a gif of how this looks on Apple’s website for the iMac Pro

It gives web pages a very dynamic look and I was surprised to learn how easy you can accomplish this with svelte.

Setting up svelte

Following the instructions on the svelte.dev homepage we run the following commands to get started with svelte:

npx degit sveltejs/template scroll-video
npm install
npm run dev

A new svelte project is now running on: http://localhost:5000

We start with an empty App.svelte file, so let’s delete all the code in that file first.

Scrolling formula

When the user scrolls down the page, we want the video the play forward. To accomplish this we’ll set the current video position using the following formula:

currentTime = duration * scrollY / total scroll height

where:

currentTime = the play position in the video
duration = total playing time of the video
scrollY = the current vertical scroll position

Binding variables

Now that we figured out what the formula is going to be, let’s see how we can read these values by using svelte’s variable binding.

We can get the vertical scrolling position with the following code:

<script>
  let scrollY
</script>

<svelte:window bind:scrollY />

Here we are binding the vertical scroll position of the window to a variable scrollY. Before we can continue, we have to make sure our window is heigh enough to allow for scrolling. Let’s add a div and some CSS for that:

<script>
  let scrollY
</script>

<svelte:window bind:scrollY />

<div class="scroll-container" />

<style>
  .scroll-container {
    height: 5000px;
  }
</style>

Notice how you can combine HTML, CSS and JavaScript within a svelte component. Almost like you would in a regular HTML file!

To verify if this works you might be tempted to add a console.log just below the line let scrollY;. If you try that however you’ll see only one 0 being logged. The reason for this is that any code inside the <script> will run only once (when initialising the component). If you want to keep executing the console.log as the scroll values updates, make it reactive using the following notation:

$: console.log(scrollY)

This may look a bit funky (and it is! I’m not even sure if it’s still JavaScript) but you’ll get used to it.

After adding the console.log with the dollar sign, you should see the scroll position logged on every update. Pretty cool for just 2 lines of code!

Similarly we can use bind on <video> to get the other values:

<script>
  // … existing code
  let time let duration</script>

<!-- …existing code -->

<video bind:currentTime="{time}" bind:duration preload="metadata" muted src="https://static01.nyt.com/newsgraphics/2019/10/23/turkey-syria-video-upload/71ab097907156ca46fb7ffd4d21dfbd119fb47e8/syria-turkey-reconstruct-7-800.mp4" type="video/mp4"/>

The cool thing about these bindings is that they are bidirectional. This means that the time variable not only holds the current playback time, but that if we change it, we’re also updating the current playback position of the video! This is also known as two-way data binding which was initially popularized by the original AngularJS.

In the next section we’ll combine this with the formula we made earlier.

Updating video playback on scroll

Before we can continue we first have to make sure the video is always displayed fullscreen on the background while we are scrolling. Let’s add a container div and some CSS to accomplish that:

<!-- .... -->

<div class="video-container"> <video
    bind:currentTime="{time}"
    bind:duration
    preload="metadata"
    muted
    src="https://int.nyt.com/newsgraphics/2020/beirut-explosion-video/main/warehouse-800.mp4"
    type="video/mp4"
  />
</div>
<style>
  .video-container { position: absolute; top: 0; bottom: 0; overflow: hidden; } .video-container video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ... */
</style>

Any changes in the scroll position should immediately be reflected in a change in the playback position. In other words: the changes in the time variable should react to the changes in the scroll position. To accomplish this we have to make sure our formule code is reactive. Just as with the console.log we use the $: notation to do this:

<script>
  let time = 0
  let duration

  let scrollY = 0

  $: {
    const totalScroll =
      document.documentElement.scrollHeight - window.innerHeight
    time = duration * (scrollY / totalScroll)
  }
</script>

Result

After adding the last piece of code the video scroll effect should work. To make the scroll effect more visible I’ve also added a heading and some content blocks. You can see the complete feature in the Svelte REPL below.

Notes on performance

The NYTimes is using optimized, small size videos on their pages. And with good reason: I’ve been doing experiments with larger (high definition) videos and it’s impossible to get the performance right on all browsers: Safari performs surprisingly well, but Firefox and Chrome quickly start to stutter when the video gets larger.

Apple is actually using a different technique to accomplish the effect on their pages: They’ve split up the video in separate frames (images) and they show a different frame when the scroll position changes. This technique performs surprisingly well, even for high definition video content. It does, however, come at a cost: All those frames have to be downloaded individually, adding up to huge download sizes. This is costly not just for mobile end users, but also if you’re hosting them.

If you want to use this technique and keep things simple I suggest using a small and optimized video just like the NYTimes does.

For anyone interested in the performance aspects of this effect: I’ve tweeted about this here (with a demo site): https://twitter.com/vnglst/status/1307681819635183616

Programming quotes

Koen van Gilst — Sun, 22 Sep 2019 00:00:00 +0000

If you don’t actively fight for simplicity in software, complexity will win.

…and it will suck.

Henrik Joreteg, 2013

There are only two kinds of languages: the ones people complain about and the ones nobody uses.

Brendan Eich approvingly quoting Bjarne Stroustrup (C++ creator) when asked about the constant hate on JavaScript. From his AMA on Reddit.

Write tests. Not too many. Mostly integration.

Guillermo Rauch, 2016

It also my experience that integration tests offer the best value for money when it comes to testing. Unit tests tend to be pointless (especially for front end code) and fragile when you do large refactors. End-2-end tests tend to be too unreliable for large scale usage.

Hierarchy of any implementation:

1 Correct

2 Simple

3 Fast

Be wary of the temptation to flip 2 and 3. Fast is great but if you can never touch the code again what is the point?

Sam Saccone, 2019

I like working with managers/product owners that also follow this philosophy. First make it work (and ship it!), then make it right (and ship it!), and then fast, small, beautiful, etc will follow.

Turns out the quote Make it work, make it right, make it fast is originally from Kent Beck (who learned it from his dad).

When people say “React is declarative” this is what they mean.

Instead of manipulating the UI in response to user actions to arrive at an undeclared state, you declare state and then the UI that represents it.

Now user actions just change state and React mirrors it to the UI.

Ryan Florence, 2019

It’s not always easy to explain what makes React’s component based programming model so powerful and fun to work with, but this tweet of Ryan Florence captures a major part of it’s appeal.

A physicist, a structural engineer, and a programmer were in a car driving over a steep alpine pass when the brakes failed. The car went faster and faster, they were struggling to get around the corners, and once or twice the flimsy crash barrier saved them from tumbling down the side of the mountain. They were sure they were all going to die, when suddenly they spotted an escape lane. They pulled into the escape lane, and came safely to a halt.

The physicist said, “We need to model the friction in the brake pads and the resultant temperature rise, and see if we can work out why they failed.”

The structural engineer said, “I think I’ve got a few spanners in the back. I’ll take a look and see if I can work out what’s wrong.”

The programmer said, “Why don’t we see if it’s reproducible?”

Anonymous

From Boris Cherny’s excellent book on TypeScript. This one is related to another one of my favorite programming quotes:

Everybody has a testing environment. Some people are lucky enough to have a totally separate environment to run production in.

Michael Stahnke, 2015

Brutalist CSS

Koen van Gilst — Sat, 17 Aug 2019 00:00:00 +0000

Bare minimum responsive CSS

CSS can be hard, but getting started with responsive design doesn’t have to be. These are the only 196 bytes you need to get started with a responsive design.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif;
  font-size: 24px;
  line-height: 1.6;
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Here’s a CodeSandbox: https://codesandbox.io/embed/brutalist-css-eu8s5

And this is how it looks

Forgit me nots

Koen van Gilst — Sun, 11 Aug 2019 00:00:00 +0000

Squashing commits on Windows

I know there’s a better way to do this (using rebase) but I like this way since it gives me more control.

git merge-base master yourBranch

# note commit hash

git reset --soft # enter commit hash

# all changes can now be committed again

It’s easier on *nix using the following oneliner:

git reset $(git merge-base master $(git rev-parse --abbrev-ref HEAD))

Rebasing without pulling master

Rebase using the remote master to make sure you’re really up to date. Useful when updating merge requests (on GitLab).

git pull --rebase origin master

Copy file from master to current branch

git checkout master -- yarn.lock

Useful aliases

Add all and commit

ac=!git add . && git commit

Pretty log

ls = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

Update last commit with current changes

amen = !git add --all && git commit --amend

Undo last commit

git reset --soft HEAD^

Or add as an alias:

git config --global alias.undo 'reset --soft HEAD^'

Oh no, I deleted all my work!?

Use the following command:

git reflog

and cherry-pick any commits you think could still have all your work.

If .gitignore is not working

Do:

git rm -r --cached .

And after that:

git add --all

After Rebasing

Instead of using -f or —force developers should use

git push --force-with-lease

Why? Because it checks the remote branch for changes which is absolutely a good idea. Let’s imagine that James and Lisa are working on the same feature branch and Lisa has pushed a commit. James now rebases his local branch and is rejected when trying to push. Of course James thinks this is due to rebase and uses —force and would rewrite all Lisa’s changes. If James had used —force-with-lease he would have received a warning that there are commits done by someone else. I don’t see why anyone would use —force instead of —force-with-lease when pushing after a rebase.

Source: https://stackoverflow.com/questions/8939977/git-push-rejected-after-feature-branch-rebase

Using React Hooks with Canvas

Koen van Gilst — Fri, 15 Mar 2019 19:43:56 +0000

In this tutorial I will use React Hooks to create an html canvas drawing website. I will start from zero using the Create React App starter kit. The resulting app offers basic features like Clear, Undo and saves drawings using localStorage.

With this tutorial I'd like to show you how hooks make composition and reuse of stateful logic possible using custom hooks.

This is a crosspost. The article Using React Hooks with Canvas first appeared on my own personal blog.

Basic setup

We'll start by creating a new React app using create-react-app.

$ npx create-react-app canvas-and-hooks
$ cd canvas-and-hooks/
$ yarn start

Your browser should open http://localhost:3000/ and you should see a spinning React logo. You're now ready to go!

1st hook: useRef

Open the file src/App.js in your favorite editor and replace the contents with the following code:

import React from 'react'

function App() {
  return (
    <canvas
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {
        alert(e.clientX)
      }}
    />
  )
}

export default App

Clicking somewhere in the open browser window should now display an alert popup, telling you the x coordinate of the mouse click.

Great, it works!

Now let's actually draw something. For that we need a ref to the canvas element and our first hook useRef is going help us with that.

import React from 'react'

function App() {
  const canvasRef = React.useRef(null)

  return (
    <canvas
      ref={canvasRef}
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {
        const canvas = canvasRef.current
        const ctx = canvas.getContext('2d')
        // implement draw on ctx here
      }}
    />
  )
}

export default App

Normally in React you don't need a ref to update something, but the canvas is not like other DOM elements. Most DOM elements have a property like value that you can update directly. The canvas works with a context (ctx in our app) that allows you to draw things. For that we have to use a ref, which is a reference to the actual canvas DOM element.

Now that we have the canvas context it's time to draw something. For that I'm going to copy paste the code that draws an SVG hook. It's got nothing to do with hooks, so don't worry if you don't fully understand it.

import React from 'react'

const HOOK_SVG =
  'm129.03125 63.3125c0-34.914062-28.941406-63.3125-64.519531-63.3125-35.574219 0-64.511719 28.398438-64.511719 63.3125 0 29.488281 20.671875 54.246094 48.511719 61.261719v162.898437c0 53.222656 44.222656 96.527344 98.585937 96.527344h10.316406c54.363282 0 98.585938-43.304688 98.585938-96.527344v-95.640625c0-7.070312-4.640625-13.304687-11.414062-15.328125-6.769532-2.015625-14.082032.625-17.960938 6.535156l-42.328125 64.425782c-4.847656 7.390625-2.800781 17.3125 4.582031 22.167968 7.386719 4.832032 17.304688 2.792969 22.160156-4.585937l12.960938-19.71875v42.144531c0 35.582032-29.863281 64.527344-66.585938 64.527344h-10.316406c-36.714844 0-66.585937-28.945312-66.585937-64.527344v-162.898437c27.847656-7.015625 48.519531-31.773438 48.519531-61.261719zm-97.03125 0c0-17.265625 14.585938-31.3125 32.511719-31.3125 17.929687 0 32.511719 14.046875 32.511719 31.3125 0 17.261719-14.582032 31.3125-32.511719 31.3125-17.925781 0-32.511719-14.050781-32.511719-31.3125zm0 0'
const HOOK_PATH = new Path2D(HOOK_SVG)
const SCALE = 0.3
const OFFSET = 80

function draw(ctx, location) {
  ctx.fillStyle = 'deepskyblue'
  ctx.shadowColor = 'dodgerblue'
  ctx.shadowBlur = 20
  ctx.save()
  ctx.scale(SCALE, SCALE)
  ctx.translate(location.x / SCALE - OFFSET, location.y / SCALE - OFFSET)
  ctx.fill(HOOK_PATH)
  ctx.restore()
}

function App() {
  const canvasRef = React.useRef(null)

  return (
    <canvas
      ref={canvasRef}
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {
        const canvas = canvasRef.current
        const ctx = canvas.getContext('2d')
        draw(ctx, { x: e.clientX, y: e.clientY })
      }}
    />
  )
}

export default App

All this does is draw an SVG shape (a fishing hook!) on position x and y. As it's not relevant for this tutorial I will omit it from now on.

Try it out, see if it works!

2nd hook: useState

The next features we'd like to add are the Clean and Undo buttons. For that we need to keep track of the user interactions with the useState hook.

import React from 'react'

// ...
// canvas draw function
// ...

function App() {
  const [locations, setLocations] = React.useState([])
  const canvasRef = React.useRef(null)

  return (
    <canvas
      ref={canvasRef}
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {
        const canvas = canvasRef.current
        const ctx = canvas.getContext('2d')
        const newLocation = { x: e.clientX, y: e.clientY }
        setLocations([...locations, newLocation])
        draw(ctx, newLocation)
      }}
    />
  )
}

export default App

There! We've added state to our app. You can verify this by adding a console.log(locations) just above the return. In the console you should see a growing array of the user clicks.

3rd hook: useEffect

Currently we're not doing anything with that state. We're drawing the hooks just like we did before. Let's see how we can fix this with the useEffect hook.

import React from 'react'

// ...
// canvas draw function
// ...

function App() {
  const [locations, setLocations] = React.useState([])
  const canvasRef = React.useRef(null)

  React.useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, window.innerHeight, window.innerWidth)
    locations.forEach(location => draw(ctx, location))
  })

  return (
    <canvas
      ref={canvasRef}
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {
        const newLocation = { x: e.clientX, y: e.clientY }
        setLocations([...locations, newLocation])
      }}
    />
  )
}

export default App

There's a lot going on here so let's break it down. We've moved the drawing function from the onClick handler to the useEffect callback. This is important, because drawing on the canvas is a side effect determined by the app state. Later we'll add persistency using localStorage, which will also be a side effect of state updates.

I've also made a few changes to the actual drawing on the canvas itself. In the current implementation every render first clears the canvas and then draws all the locations. We could be smarter than that, but to keep it simple I'll leave it to reader to further optimize this.

We've done all the hard work, adding the new feature should be easy now. Let's create the Clear button.

import React from 'react'

// ...
// canvas draw function
// ...

function App() {
  const [locations, setLocations] = React.useState([])
  const canvasRef = React.useRef(null)

  React.useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, window.innerHeight, window.innerWidth)
    locations.forEach(location => draw(ctx, location))
  })

  function handleCanvasClick(e) {
    const newLocation = { x: e.clientX, y: e.clientY }
    setLocations([...locations, newLocation])
  }

  function handleClear() {
    setLocations([])
  }

  return (
    <>
      <button onClick={handleClear}>Clear</button>
      <canvas
        ref={canvasRef}
        width={window.innerWidth}
        height={window.innerHeight}
        onClick={handleCanvasClick}
      />
    </>
  )
}

export default App

The Clear feature is just a simple state update: we clearing the state by setting it to an empty array []. That was easy right?

I've also taken the opportunity to clean up a bit, by moving the canvas onClick handler to a separate function.

Let's do another feature: the Undo button. Same principle, even though this state update is a bit more tricky.

import React from 'react'

// ...
// canvas draw function
// ...

function App() {
  const [locations, setLocations] = React.useState([])
  const canvasRef = React.useRef(null)

  React.useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, window.innerHeight, window.innerWidth)
    locations.forEach(location => draw(ctx, location))
  })

  function handleCanvasClick(e) {
    const newLocation = { x: e.clientX, y: e.clientY }
    setLocations([...locations, newLocation])
  }

  function handleClear() {
    setLocations([])
  }

  function handleUndo() {
    setLocations(locations.slice(0, -1))
  }

  return (
    <>
      <button onClick={handleClear}>Clear</button>
      <button onClick={handleUndo}>Undo</button>
      <canvas
        ref={canvasRef}
        width={window.innerWidth}
        height={window.innerHeight}
        onClick={handleCanvasClick}
      />
    </>
  )
}

export default App

Since any state update in React has to be immutible, we can't use something like locations.pop() to remove the most recent item from the array. We have to do it without changing the original locations array. The way to do this is with slice, i.e. by slicing off all the elements up until the last one. You can do that with locations.slice(0, locations.length - 1), but slice is smart enough to interpret -1 as the last item in the array.

Before we continue, let's clean up the html and add some css. Add the following div around the buttons:

import React from 'react'

import './App.css'

// ...
// canvas draw function
// ...

function App() {
  // ...

  return (
    <>
      <div className="controls">
        <button onClick={handleClear}>Clear</button>
        <button onClick={handleUndo}>Undo</button>
      </div>
      <canvas
        ref={canvasRef}
        width={window.innerWidth}
        height={window.innerHeight}
        onClick={handleCanvasClick}
      />
    </>
  )
}

export default App

And replace the css in App.css with the following:

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.controls {
  position: absolute;
  top: 0;
  left: 0;
}

button {
  height: 3em;
  width: 6em;
  margin: 1em;
  font-weight: bold;
  font-size: 0.5em;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  border: 1px solid white;
  background-color: black;
}

button:hover {
  color: black;
  background-color: #00baff;
}

button:focus {
  border: 1px solid #00baff;
}

button:active {
  background-color: #1f1f1f;
  color: white;
}

Looking good, let's get started on the next feature: persistence!

Adding localStorage

As mentioned before, we also want our drawings to be saved to localStorage. As this is another side effect, we'll add another useEffect.

import React from 'react'

import './App.css'

// ...draw function

function App() {
  const [locations, setLocations] = React.useState(
    JSON.parse(localStorage.getItem('draw-app')) || []
  )
  const canvasRef = React.useRef(null)

  React.useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, window.innerHeight, window.innerWidth)
    locations.forEach(location => draw(ctx, location))
  })

  React.useEffect(() => {
    localStorage.setItem('draw-app', JSON.stringify(locations))
  })

  function handleCanvasClick(e) {
    const newLocation = { x: e.clientX, y: e.clientY }
    setLocations([...locations, newLocation])
  }

  function handleClear() {
    setLocations([])
  }

  function handleUndo() {
    setLocations(locations.slice(0, -1))
  }

  return (
    <>
      <div className="controls">
        <button onClick={handleClear}>Clear</button>
        <button onClick={handleUndo}>Undo</button>
      </div>
      <canvas
        ref={canvasRef}
        width={window.innerWidth}
        height={window.innerHeight}
        onClick={handleCanvasClick}
      />
    </>
  )
}

export default App

We've now completed all the features we set out to build, but we're not done yet. One of the coolest things about hooks is that you can use existing hooks to compose new custom hooks. Let me demonstrate this by creating a custom usePersistentState hook.

1st custom hook: usePersistentState

import React from 'react'

import './App.css'

// ...draw function

// our first custom hook!
function usePersistentState(init) {
  const [value, setValue] = React.useState(
    JSON.parse(localStorage.getItem('draw-app')) || init
  )

  React.useEffect(() => {
    localStorage.setItem('draw-app', JSON.stringify(value))
  })

  return [value, setValue]
}

function App() {
  const [locations, setLocations] = usePersistentState([])
  const canvasRef = React.useRef(null)

  React.useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, window.innerHeight, window.innerWidth)
    locations.forEach(location => draw(ctx, location))
  })

  function handleCanvasClick(e) {
    const newLocation = { x: e.clientX, y: e.clientY }
    setLocations([...locations, newLocation])
  }

  function handleClear() {
    setLocations([])
  }

  function handleUndo() {
    setLocations(locations.slice(0, -1))
  }

  return (
    // ...
  )
}

export default App

There! We've created our first custom hook and all the logic that relates to saving and getting the state from localStorage is extracted from the App component. And we did this in a way that the hook usePersistentState can be reused by other components. There's nothing in there that's specific for this component.

Let's repeat this trick for the logic that relates to the canvas.

2nd custom hook: usePersistentCanvas

import React from 'react'

import './App.css'

// ...draw function

// our first custom hook
function usePersistentState(init) {
  const [value, setValue] = React.useState(
    JSON.parse(localStorage.getItem('draw-app')) || init
  )

  React.useEffect(() => {
    localStorage.setItem('draw-app', JSON.stringify(value))
  })

  return [value, setValue]
}

// our second custom hook: a composition of the first custom hook and React's useEffect + useRef
function usePersistentCanvas() {
  const [locations, setLocations] = usePersistentState([])
  const canvasRef = React.useRef(null)

  React.useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    locations.forEach(location => draw(ctx, location))
  })

  return [locations, setLocations, canvasRef]
}

function App() {
  const [locations, setLocations, canvasRef] = usePersistentCanvas()

  function handleCanvasClick(e) {
    const newLocation = { x: e.clientX, y: e.clientY }
    setLocations([...locations, newLocation])
  }

  function handleClear() {
    setLocations([])
  }

  function handleUndo() {
    setLocations(locations.slice(0, -1))
  }

  return (
    <>
      <div className="controls">
        <button onClick={handleClear}>Clear</button>
        <button onClick={handleUndo}>Undo</button>
      </div>
      <canvas
        ref={canvasRef}
        width={window.innerWidth}
        height={window.innerHeight}
        onClick={handleCanvasClick}
      />
    </>
  )
}

export default App

As you can see our App component has become quite small. All the logic that is related to storing the state in localStorage and drawing on the canvas is extracted to custom hooks. You could clean up this file even further by moving the hooks into a hooks file. That way other components could reuse this logic, for instance to compose even better hooks.

Conclusions

What makes hooks so special if you compare them to the lifecycle methods (like componentDidMount, componentDidUpdate)? Looking at the examples above:

hooks allow you to reuse lifecycle logic in different components
with hooks you can use composition to create richer custom hooks, just like you can use composition to create richer UI components
hooks are shorter and cleaner - no more bloated, and sometimes confusing, lifecycle methods

It's still too early to tell whether hooks are really going to solve all these problems - and what new bad practices might arise from them - but looking at the above I'm pretty excited and optimistic for React's future!

Let me know what you think! You can reach me on Twitter using @vnglst.

Source code is also available on Github.