Raphaël Bosi
16033e9f99
- `frontComponentHostCommunicationApi` gets a new object reference on every render, causing the `useMemo`/`useEffect` in `FrontComponentWorkerEffect` to tear down and re-create the web worker each time. - Decouple the host API lifecycle from the worker lifecycle by moving thread.exports updates into a dedicated `FrontComponentUpdateHostCommunicationApiEffect` that mutates the thread's exports object in place via Object.assign. - Rename `FrontComponentHostCommunicationApiEffect` to `FrontComponentInitializeHostCommunicationApiEffect` for clarity. ## Before https://github.com/user-attachments/assets/6f3a5c14-2ae7-4317-82b5-1625abb4143e ## After https://github.com/user-attachments/assets/1059d6cd-e02c-4477-b3e8-8e965a716434
21 lines
756 B
TypeScript
21 lines
756 B
TypeScript
import { type FrontComponentHostCommunicationApi } from '@/types/FrontComponentHostCommunicationApi';
|
|
import { type WorkerExports } from '@/types/WorkerExports';
|
|
import { type ThreadWebWorker } from '@quilted/threads';
|
|
import { useEffect } from 'react';
|
|
|
|
type FrontComponentInitializeHostCommunicationApiEffectProps = {
|
|
thread: ThreadWebWorker<WorkerExports, FrontComponentHostCommunicationApi>;
|
|
};
|
|
|
|
export const FrontComponentInitializeHostCommunicationApiEffect = ({
|
|
thread,
|
|
}: FrontComponentInitializeHostCommunicationApiEffectProps) => {
|
|
useEffect(() => {
|
|
thread.imports.initializeHostCommunicationApi().catch((error) => {
|
|
console.error('Failed to initialize host communication API:', error);
|
|
});
|
|
}, [thread]);
|
|
|
|
return null;
|
|
};
|