Vue 3 vs React: The Minesweeper game

In this post I will try to compare the two frameworks by developing in each of them the minesweeper game.

Here is the code for the minesweeper game with React:

import { useEffect, useRef, useState } from 'react'
import Minesweeper from './Minesweeper'

const App = () => {
  const initialDim = 2

  const [dim, setDim] = useState(initialDim)
  const [Dim, SetDim] = useState(initialDim)

  const [foo, setFoo] = useState(0)

  const [minesweeper, setMinesweeper] = useState(
    <Minesweeper key={Math.random()} dim={Dim} />
  )

  const reset = () => {
    setMinesweeper(<Minesweeper key={Math.random()} dim={Dim} />)
  }

  const inputRef = useRef(null)

  const setDimension = () => {
    SetDim(inputRef.current.value)
    setFoo((foo) => foo + 1)
  }

  useEffect(() => {
    reset()
  }, [foo])

  return (
    <div>
      {minesweeper}
      <button onClick={reset}>reset</button>
      <input
        type="text"
        value={dim}
        ref={inputRef}
        onChange={(event) => {
          setDim(event.target.value)
        }}
      />
      <button onClick={setDimension}>set dim</button>
    </div>
  )
}

export default App

Previous was code for App.js. We have also Minesweeper.js and Cell.js (also for Vue 3).

import styled from 'styled-components'
import Cell from './Cell'
import { useEffect, useRef, useState } from 'react'

const Minesweeper = ({ dim }) => {
  const arrayRefs = new Array(dim)

  for (let i = 0; i < dim; i++) {
    arrayRefs[i] = new Array(dim)
  }

  const _minesAround = new Array(dim)
  for (let i = 0; i < dim; i++) {
    _minesAround[i] = new Array(dim)
  }

  const [minesAround, setMinesAround] = useState(_minesAround)

  const computeMinesAround = () => {
    for (let i = 0; i < dim; i++) {
      for (let j = 0; j < dim; j++) {
        let numOfMines = 0
        infoRef.current[i - 1] &&
          infoRef.current[i - 1][j - 1] &&
          infoRef.current[i - 1][j - 1].isMined &&
          numOfMines++
        infoRef.current[i - 1] &&
          infoRef.current[i - 1][j] &&
          infoRef.current[i - 1][j].isMined &&
          numOfMines++
        infoRef.current[i - 1] &&
          infoRef.current[i - 1][j + 1] &&
          infoRef.current[i - 1][j + 1].isMined &&
          numOfMines++
        infoRef.current[i] &&
          infoRef.current[i][j - 1] &&
          infoRef.current[i][j - 1].isMined &&
          numOfMines++
        infoRef.current[i] &&
          infoRef.current[i][j + 1] &&
          infoRef.current[i][j + 1].isMined &&
          numOfMines++
        infoRef.current[i + 1] &&
          infoRef.current[i + 1][j - 1] &&
          infoRef.current[i + 1][j - 1].isMined &&
          numOfMines++
        infoRef.current[i + 1] &&
          infoRef.current[i + 1][j] &&
          infoRef.current[i + 1][j].isMined &&
          numOfMines++
        infoRef.current[i + 1] &&
          infoRef.current[i + 1][j + 1] &&
          infoRef.current[i + 1][j + 1].isMined &&
          numOfMines++
        const newMinesAround = [...minesAround]
        newMinesAround[i][j] = numOfMines
        setMinesAround(newMinesAround)
      }
    }
  }

  useEffect(() => {
    computeMinesAround()
  }, [])

  const infoRef = useRef(arrayRefs)

  const _cellRefs = new Array(dim)
  for (let i = 0; i < dim; i++) {
    _cellRefs[i] = new Array(dim)
  }

  const cellRefs = useRef(_cellRefs)

  // we prepare the board
  const board = new Array(dim)

  for (let i = 0; i < dim; i++) {
    board[i] = new Array(dim)
  }

  for (let i = 0; i < dim; i++) {
    for (let j = 0; j < dim; j++) {
      board[i][j] = (
        <Cell
          key={`${i}_${j}`}
          numOfMines={minesAround[i][j]}
          ref={(item) => (cellRefs.current[i][j] = item)}
          cellRefs={cellRefs}
          i={i}
          j={j}
          infoRef={infoRef}
        />
      )
    }
  }

  return (
    <Div>
      {board.map((row, i) => (
        <Row key={i}>{row}</Row>
      ))}
    </Div>
  )
}

export default Minesweeper

const Div = styled.div`
  font-family: sans-serif;
`

const Row = styled.div`
  display: flex;
`

Previous was Minesweeper.js. Finally, for React, we have Cell.js:

import styled from 'styled-components'
import { useEffect, useState, forwardRef } from 'react'

const Cell = forwardRef(
  ({ numOfMines, cellRefs, i, j, infoRef }, ref) => {
    const [isCovered, setIsCovered] = useState(true)
    const [isMined,] = useState(Math.random() > 0.8)

    useEffect(() => {
      infoRef.current[i][j] = {isMined,isCovered}
    }, [isCovered,isMined])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i - 1] &&
        infoRef.current[i - 1][j - 1] &&
        infoRef.current[i - 1][j - 1].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i - 1][j - 1].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i - 1] &&
        infoRef.current[i - 1][j - 1] &&
        infoRef.current[i - 1][j - 1].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i - 1] &&
        infoRef.current[i - 1][j] &&
        infoRef.current[i - 1][j].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i - 1][j].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i - 1] &&
        infoRef.current[i - 1][j] &&
        infoRef.current[i - 1][j].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i - 1] &&
        infoRef.current[i - 1][j + 1] &&
        infoRef.current[i - 1][j + 1].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i - 1][j + 1].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i - 1] &&
        infoRef.current[i - 1][j + 1] &&
        infoRef.current[i - 1][j + 1].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i] &&
        infoRef.current[i][j - 1] &&
        infoRef.current[i][j - 1].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i][j - 1].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i] &&
        infoRef.current[i][j - 1] &&
        infoRef.current[i][j - 1].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i] &&
        infoRef.current[i][j + 1] &&
        infoRef.current[i][j + 1].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i][j + 1].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i] &&
        infoRef.current[i][j + 1] &&
        infoRef.current[i][j + 1].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i + 1] &&
        infoRef.current[i + 1][j - 1] &&
        infoRef.current[i + 1][j - 1].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i + 1][j - 1].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i + 1] &&
        infoRef.current[i + 1][j - 1] &&
        infoRef.current[i + 1][j - 1].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i + 1] &&
        infoRef.current[i + 1][j] &&
        infoRef.current[i + 1][j].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i + 1][j].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i + 1] &&
        infoRef.current[i + 1][j] &&
        infoRef.current[i + 1][j].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    useEffect(() => {
      if (
        numOfMines === 0 &&
        isMined === false &&
        infoRef.current[i + 1] &&
        infoRef.current[i + 1][j + 1] &&
        infoRef.current[i + 1][j + 1].isCovered &&
        infoRef.current[i][j].isCovered === false
      ) {
        cellRefs.current[i + 1][j + 1].click()
      }
    }, [
      isCovered,
      numOfMines,
      isMined,
      infoRef.current[i + 1] &&
        infoRef.current[i + 1][j + 1] &&
        infoRef.current[i + 1][j + 1].isCovered,
      infoRef.current[i][j] && infoRef.current[i][j].isCovered,
    ])

    const uncover = () => {
      if (isCovered) {
        setIsCovered(false)
      }
    }

    return (
      <Div isCovered={isCovered} onClick={uncover} ref={ref}>
        {isCovered ? '' : isMined ? '😄' : numOfMines === 0 ? '' : numOfMines}
      </Div>
    )
  }
)

export default Cell

const Div = styled.div`
  border-radius: 5px;
  width: 18px;
  height: 18px;
  margin: 2px;
  cursor: pointer;
  ${({ isCovered }) => `
${isCovered ? 'background-color:grey;' : ''}
`}
`

So that's it for React. Next we are going to see the same files for Vue 3:

import {defineComponent,ref} from 'vue'
import {Minesweeper} from './Minesweeper'

export const App=defineComponent(()=>{

    const inputRef=ref()

    const dim=ref()

    const setDimension=()=>{
        dim.value=inputRef.value.value
    }

    return ()=>{
        return <>
        <input ref={inputRef} /><button onClick={setDimension}>set Dimension</button>
        <Minesweeper dim={dim}/>
        </>
    }
})

Previous was App.tsx. Next we are going to see Minesweeper.tsx for Vue 3:

import { defineComponent,ref,onMounted,onUpdated } from 'vue'
import {Cell} from './Cell'
import styled from 'vue3-styled-components'

interface IProps{
    dim:any;
}

export const Minesweeper= defineComponent((props:IProps)=>{

        const infoRefs=ref<any[]>(new Array(props.dim.value))

        onUpdated(()=>{
            for(let i=0;i<props.dim.value;i++){
                for(let j=0;j<props.dim.value;j++){
                    let minesAround=0
                    if(infoRefs.value[i-1]&&infoRefs.value[i-1][j-1])
                        infoRefs.value[i-1][j-1].isMined&&minesAround++
                    if(infoRefs.value[i-1]&&infoRefs.value[i-1][j])
                        infoRefs.value[i-1][j].isMined&&minesAround++
                    if(infoRefs.value[i-1]&&infoRefs.value[i-1][j+1])
                        infoRefs.value[i-1][j+1].isMined&&minesAround++
                    if(infoRefs.value[i]&&infoRefs.value[i][j-1])
                        infoRefs.value[i][j-1].isMined&&minesAround++
                    if(infoRefs.value[i]&&infoRefs.value[i][j+1])
                        infoRefs.value[i][j+1].isMined&&minesAround++
                    if(infoRefs.value[i+1]&&infoRefs.value[i+1][j-1])
                        infoRefs.value[i+1][j-1].isMined&&minesAround++
                    if(infoRefs.value[i+1]&&infoRefs.value[i+1][j])
                        infoRefs.value[i+1][j].isMined&&minesAround++
                    if(infoRefs.value[i+1]&&infoRefs.value[i+1][j+1])
                        infoRefs.value[i+1][j+1].isMined&&minesAround++
                    infoRefs.value[i][j]={...infoRefs.value[i][j],minesAround}
                }
            }
        })

        return ()=>{

            const board=new Array(props.dim.value)

            for(let i=0;i<props.dim.value;i++){
                infoRefs.value[i]=new Array(props.dim.value)
                board[i]=new Array(props.dim.value)
                for(let j=0;j<props.dim.value;j++){
                    infoRefs.value[i][j]={}
                    board[i][j]=<Cell key={`${props.dim.value}_${i}_${j}`} infoRefs={infoRefs} i={i} j={j} />
                }
            }

            return <>
                {board.map(row=><Row>{row}</Row>)}
            </>
        }
})

Minesweeper.props={
    dim:{
        type:Object
    }
}

const Row=styled.div`
display:flex;
`

Finally, the last file for Vue 3 would be Cell.tsx:

import { defineComponent,onMounted,onUpdated,ref } from 'vue'
import styled from 'vue3-styled-components'

interface IProps{
    infoRefs:any;
    i:number;
    j:number;
}

export const Cell= defineComponent((props:IProps)=>{

    const isMined=ref(Math.random()>0.9)
    const cellRef=ref()

    onMounted(()=>{
        props.infoRefs.value[props.i][props.j]={...props.infoRefs.value[props.i][props.j],isMined,cellRef,isCovered}
    })

    onUpdated(()=>{
        if(!isCovered.value&&!isMined.value&&props.infoRefs.value[props.i][props.j].minesAround===0){
            props.infoRefs.value[props.i-1]&&props.infoRefs.value[props.i-1][props.j-1]&&props.infoRefs.value[props.i-1][props.j-1].isCovered&&props.infoRefs.value[props.i-1][props.j-1].cellRef.$el.click()
            props.infoRefs.value[props.i-1]&&props.infoRefs.value[props.i-1][props.j]&&props.infoRefs.value[props.i-1][props.j].isCovered&&props.infoRefs.value[props.i-1][props.j].cellRef.$el.click()
            props.infoRefs.value[props.i-1]&&props.infoRefs.value[props.i-1][props.j+1]&&props.infoRefs.value[props.i-1][props.j+1].isCovered&&props.infoRefs.value[props.i-1][props.j+1].cellRef.$el.click()
            props.infoRefs.value[props.i]&&props.infoRefs.value[props.i][props.j-1]&&props.infoRefs.value[props.i][props.j-1].isCovered&&props.infoRefs.value[props.i][props.j-1].cellRef.$el.click()
            props.infoRefs.value[props.i]&&props.infoRefs.value[props.i][props.j+1]&&props.infoRefs.value[props.i][props.j+1].isCovered&&props.infoRefs.value[props.i][props.j+1].cellRef.$el.click()
            props.infoRefs.value[props.i+1]&&props.infoRefs.value[props.i+1][props.j-1]&&props.infoRefs.value[props.i+1][props.j-1].isCovered&&props.infoRefs.value[props.i+1][props.j-1].cellRef.$el.click()
            props.infoRefs.value[props.i+1]&&props.infoRefs.value[props.i+1][props.j]&&props.infoRefs.value[props.i+1][props.j].isCovered&&props.infoRefs.value[props.i+1][props.j].cellRef.$el.click()
            props.infoRefs.value[props.i+1]&&props.infoRefs.value[props.i+1][props.j+1]&&props.infoRefs.value[props.i+1][props.j+1].isCovered&&props.infoRefs.value[props.i+1][props.j+1].cellRef.$el.click()
        }
    })


    const isCovered=ref(true)

    const unCover=()=>{
        isCovered.value=false
        props.infoRefs.value[props.i][props.j]={...props.infoRefs.value[props.i][props.j],isCovered}
        console.log(`clicked ${props.i}_${props.j}`)
    }

    return ()=>{

        return <>
        <_Cell isCovered={isCovered.value} onClick={unCover} ref={cellRef}>{isCovered.value?'':isMined.value?'😁':props.infoRefs.value[props.i][props.j].minesAround===0?'':props.infoRefs.value[props.i][props.j].minesAround}</_Cell>
        </>
    }

})

Cell.props={
    infoRefs:{
        type:Object
    },
    i:{
        type:Number
    },
    j:{
        type:Number
    }
}


const _CellProps={
    isCovered:Boolean
}

const _Cell=styled('div',_CellProps)`
${({isCovered}:any)=>`
${isCovered?`
background-color:grey;
`:''}
`}
width:18px;
height:18px;
border-radius:5px;
margin:5px;
cursor:pointer;
`

So that was all. Thanks for watching.

ps: for those who want to check which one is more performant, copy the code, implement it in a project, run it, put a dimension of one hundred, and see what happens 😉 (you might get surprised)

ps2: keywords: vue 3, react, jsx, benchmark, minesweeper, performance