Update templates to include an example of main -> renderer communication

[faribauc]

Clear and concise description of the problem

I'm having a hard time getting the renderer process (React app) listening to a main thread event. The project was created using the react-ts template.

I have an event being triggered from the main thread (every 10 seconds, for testing purposes):

  updater.autoUpdater.on('update-downloaded', (info) => {
    console.log('AutoUpdater::update-downloaded')
    mainWindow?.webContents.send('update-downloaded', info)
    setTimeout(() => updater.autoUpdater.checkForUpdatesAndNotify(), 1000 * delayBeforeNextCheck)
  })

and trying to subscribe to it from the App component:

import Versions from './components/Versions'
import electronLogo from './assets/electron.svg'
import { useEffect } from 'react'

function App(): JSX.Element {
  const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
  const updateApp = (): void => window.electron.ipcRenderer.send('update')

  const updateAvailable: string | null = null

  useEffect(() => {
    const callback = (...args: unknown[]): void => {
      console.log('args', args)
      // Set updateAvailable
    }

    const removeListener = window.electron.ipcRenderer.on('update-downloaded', callback)

    return () => {
      removeListener()
    }
  }, [])

  return (
    <div>{updateAvailable}</div>
  )
}

export default App

The event ls never fired in the React component.

Used Scaffolding

create-electron

Suggested solution

A simple example or replying to the "ping" by sending back "pong" to the renderer instead of just console logging it.

I don't have a solution for the moment as I can't get it to work.

Alternative

No response

Additional context

No response

Validations

• [X] Follow the Code of Conduct.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.