Force update hook for react.js

hooks-useForceUpdate.js

import { useState } from 'react'

const useForceUpdate = () => {
  const [, setState] = useState()
  return setState 
}

export default useForceUpdate

Usage

import React, { useEffect, useRef } from 'react'
import useForceUpdate from './hooks-useForceUpdate'

const Game = ({ width = 100, height = 100 }) => {
  const ref = useRef()
  const forceUpdate = useForceUpdate()

  // Rerender this component every 10 seconds
  useEffect(() => {
    const id = setInterval(forceUpdate, 16)
    return () => clearInterval(id)
  }, [])

  // Do your canvas painting here...
  useEffect(() => {
    const context = ref.current.getContext('2d')

    // Clean canvas
    context.clearRect(0, 0, width, height)

    // Paint something
    context.fillStyle = "#000"
    context.fillRect(0, 0, width, height);
  })

  return (
    <canvas
      ref={ref}
      width={width}
      height={height}
    />
  )
}

export default Game

I used this code to create a canvas renderer, that rerenders every 16ms.

Demo