Nested component re-render with preact signals

53 Views Asked by At

I have a activeWindows signal defined outside the JSX:

export const activeWindows = signal([
  {
    index: 1,
    title: 'App1',
    isMinimized: false,
    dimensions: {
        ...
    },
  {
    index: 2,
    title: 'App2',
    isMinimized: false,
    dimensions: {
      ...
    }
  },

  ....
  }

In my parent component:

      {
        activeWindows.value.map((window) => (
            <Fragment key={window.index}>
              <AppWindow 
                idx={window.index}
                title={window.title}
                isMinimized={window.isMinimized}
                dimensions={window.dimensions}
                handleClose={() => handleClose(window.index)}
              />
            </Fragment>
        ))
      }

handleClose is just removing the given window object from activeWindows:

  function handleClose(index: any){
    activeWindows.value = activeWindows.value.filter((window) => (
      window.index != index
    ))
  }

In my AppWindow, handling of handleClose is very straight-forward. On a button click, it is just executing the method.

Now, the main issue arises when my handleClose is clicked but the re-render is not trigerred everytime. It happens alternatively, if for first window, if it re-rendered then for the second it doesn't then for third it works and so on. At those cases when UI is not re-rendered, my removed object's window is still visible in UI. Its visible until there is any other trigger that can push a re-render. Why is this happening? Even upon successful updation of my activeWindows, I dont have a successful re-render.

I made lot of hits and trials but none seem to work.

0

There are 0 best solutions below