Max update exceeded error when passing options to useXTerm()

[cyberscoundrel]

Sorry if this isn't formatted correctly. I'd really like to use this package but I need the background color to be transparent. If you pass options to the useXTerm function, you get the react error:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. Component Stack:
App App.jsx:4
:1:145535
overrideMethod :1
React 5
useXTerm index.js:64
React 9
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
(Async: EventHandlerNonNull)
js scheduler.development.js:571
js scheduler.development.js:633
__require chunk-IZZUN6UV.js:3
js index.js:6
__require chunk-IZZUN6UV.js:3
React 2
__require chunk-IZZUN6UV.js:3
js React
__require chunk-IZZUN6UV.js:3
js React
__require chunk-IZZUN6UV.js:3
react-dom_client.js:37

You can recreate this error easily by editing the example code by only adding an options object to the hook like so:

const { instance, ref } = useXTerm({
options: {
cursorBlink: true,
}})

I originally encountered this error in my own project and assumed it was my lack of understanding, but the same problem persists in the example code. I know this is a smaller project that has limited time and resources, but I hope that someone can take a look at this and either tell me what I'm doing incorrectly or tell me I'm not stupid. I am too stupid to try to fix it myself and create a pull request.

[cyberscoundrel]

I have discovered using pnpm patch feature that removing options from the useEffect hook dependencies in dist/index.js remedies the problem and causes no issues that I can find at a first glance. Perhaps there is a good reason it was a dependency for the hook but I can't immediately tell how it effects functionality.

[RemiBonnet]

Hey @cyberscoundrel!

Thanks for the report, I can reproduce this error with the hook - I'll try to add fix soon.

In meantime, you can use the component, it works:

const MyTerminal = () => {
  const onData = (data) => {
    console.log(`Received data: ${data}`)
  }

  const onResize = (cols, rows) => {
    console.log(`Terminal resized to ${cols} columns and ${rows} rows`)
  }

  return (
    <XTerm
      onData={onData}
      onResize={onResize}
      options={{ cursorBlink: true }}
      style={{ width: '100%', height: '100%' }}
    />
  )
}

[cyberscoundrel]

Hey @cyberscoundrel!

Thanks for the report, I can reproduce this error with the hook - I'll try to add fix soon.

In meantime, you can use the component, it works:

const MyTerminal = () => {
  const onData = (data) => {
    console.log(`Received data: ${data}`)
  }

  const onResize = (cols, rows) => {
    console.log(`Terminal resized to ${cols} columns and ${rows} rows`)
  }

  return (
    <XTerm
      onData={onData}
      onResize={onResize}
      options={{ cursorBlink: true }}
      style={{ width: '100%', height: '100%' }}
    />
  )
}

Forgive me for my inexperience, but how do I write to the terminal using the component? I understand setting a hook for incoming data, and I would assume there is some way to write data to the component, but I'm not sure how I would without the instance provided by the hook.

But anyway, thanks for the reply! I hope this thread has been helpful to you.