Unable to update content in useEffect and render

Question

I'm trying to make a web app that fires off a bunch of fireworks once a button is pressed. It's using React and I'm trying to use the useEffect hook to fire off fireworks after the ID variable is updated. When it starts rendering it works fine and fires the fireworks the way I want, but the restart button doesn't work. No fireworks were shown after the first time. By using console.log, I made sure that when the button is pressed and the count changes, the useEffect block is indeed called. I think what's happening is because the container is declared again and when re-rendered it's not updated? I honestly don't know, would really appreciate some help <3

import './App.css';
import React from 'react';
import {useEffect, useState} from 'react';
import Fireworks from 'fireworks-js';

function App() {

  const delay = ms => new Promise(res => setTimeout(res, ms))

  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count 1)
    console.log('button pressed' count);
  }

  useEffect(()=>{
    console.log('effect called' count);
    const container = document.getElementById('fireworks-container');
    const fireworks = new Fireworks(container);
    fireworks.launch(10);
    fireworks.launch(20);
    makeRequest();

    async function makeRequest() {
      await delay(200);
      fireworks.launch(20);
      await delay(300);
      fireworks.launch(20);
    }
  }, [count]);

  return (
    <div className="App">
      <h1 className = "text">Fireworks App</h1>
      <button onClick={handleClick}>Restart</button>
      <div id = 'fireworks-container' style = {{width: '100%', height: '100vh'}}/>
    </div>
  );
}

export default App;

I thought the fireworks would appear again because I created a new one and fired it? I feel like I need to create the fireworks object outside of useEffect, but it doesn't work and gives me a bunch of errors.

Answer 1

I created two separate useEffect blocks, one of which just initializes the container and firework objects! Thanks for everyone's help!

import './App.css';
import React, { useRef } from 'react';
import {useEffect, useState} from 'react';
import Fireworks from 'fireworks-js';

function App() {

  const delay = ms => new Promise(res => setTimeout(res, ms))

  const fireworks = useRef();

  useEffect(()=>{
    const container = document.getElementById('fireworks-container');
    fireworks.current = new Fireworks(container);
  }, []);

  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count+1)
    console.log('button pressed' + count);
  }

  useEffect(()=>{
    console.log('effect called' + count);
    fireworks.current.launch(10);
    fireworks.current.launch(20);
    makeRequest();

    async function makeRequest() {
      await delay(200);
      fireworks.current.launch(20);
      await delay(300);
      fireworks.current.launch(20);
    }
  }, [count]);

  return (
    <div className="App">
      <h1 className = "text">Fireworks App</h1>
      <button onClick={handleClick}>Restart</button>
      <div id = 'fireworks-container' style = {{width: '100%', height: '100vh'}}/>
    </div>
  );
}

export default App;