How to split a component when it gets big. ReactJs or React Native

Question

I have just started learning ReactJs and I am building the snake game for practice.

Everything is going okay, but what I dont like is that my 'Game' component is getting bigger. I can not think of an optimal way to split it in several, simpler components

Here is the repo and I will appreciate any corrections and recommendations.

Answer 1

As far as I have seen your code, you have divided components the right way, in my opinion, you should not break them further down.

However, you can make a few changes to Game.js file:

• You can divide your functions into utils file(a separate .js file) for the better understanding of your code.

• You can move your styled components to a file like Game.style.js

• You can also maybe use hooks for direction state.

An example for styled-components is given below:

Game.js

import React from 'react'
import Board from './Board'
import Toolbar from './Toolbar'

// styles
import {Row, Wrapper} from './Game.style';


class Game extends React.Component {
  constructor(props) {
  }

  initGame = () => {
  }

  updateCanvas = () => {
    }

    // for (let i = 0; i < snake.length; i++) {
    //   ctx.fillStyle = '#3682c9'
    //   ctx.fillRect(snake[i].x, snake[i].y, squareWidth, squareHeight)
    // }
    // ctx.fillStyle = '#a2d149'
    // ctx.fillRect(0, 0, 20, 20)
    // ctx.fillStyle = '#aad751'
    // ctx.fillRect(20, 0, 20, 20)
    // ctx.fillStyle = '#a2d149'
    // ctx.fillRect(40, 0, 20, 20)
  }

  drawSnake = () => {
  }

  generateFood = () => {
  }

  drawFood = () => {
  }

  changeDirection = event => {
  }

  moveSnake = () => {
  }

  startGame = () => {
  }

  componentDidMount() {
    this.refs.canvas.focus()
    this.initGame()
  }

  componentDidUpdate() {}

  render() {
    const { boardWidth, boardHeight } = this.state

    console.log(this.state)
    return (
      <Wrapper>
        <Toolbar onClick={this.initGame} />
        <canvas
          ref="canvas"
          onKeyDown={this.changeDirection}
          tabIndex="0"
          width={boardWidth}
          height={boardHeight}
        />
      </Wrapper>
    )
  }
}

export default Game

Game.style.js

import styled from 'styled-components'

export const Row = styled.div`
  display: flex;
  &:nth-child(odd) {
    div:nth-child(even) {
      background-color: #aad751;
    }
  }
  &:nth-child(even) {
    div:nth-child(odd) {
      background-color: #aad751;
    }
  }
`;

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
`;

PS. I highly emphasize on importing these function from another file of utils.

Answer 2

If there are multiple actions that act on a single piece of state, they’ll all need to be placed in the same component. The more ways that the state can change, the larger the component gets. And if a component has actions that affect multiple types of state, the component will become massive.

And that’s why you’ll want to factor out smaller components where possible

Here's a very good example on How do you separate components?

more advanced level for achieving this is Code-Splitting. Code-Splitting is a feature supported by bundlers like Webpack and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.

React docs provide very simple way of Code splitting here