How to refresh accumulative shadows (AccumulativeContext)?

[fabiopolimeni]

I have a project using the AccumulativeShadows component, where I want to change the shadows map resolution of the RandomizedLight from a leva component. But I noticed that when the I change the mapSize, the shadows disappear (e.g going from 512 to 1024) and they don't get recomputed. I was thinking that I may need to call the reset() function of the AccumulativeContext, but that is not exported. How would I go to fix this?

The whole component is here in case you need to look at it

function SceneLighting() {
  const { sceneState, setSceneState } = useContext(SceneStateContext);
  const { frames, alpha, amount, radius, scale, ambient, intensity, resolution, translation } = sceneState.lighting;

  const [, set] = useControls("Scene", () => ({
    Lighting: folder(
      {
        frames: {
          value: frames,
          transient: false,
          onChange: (frames) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, frames } })),
        },
        alpha: {
          value: alpha,
          min: 0,
          max: 1,
          step: 0.01,
          transient: false,
          onChange: (alpha) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, alpha } })),
        },
        translation: {
          value: translation,
          min: -100,
          max: 100,
          step: 0.1,
          transient: false,
          onChange: (translation) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, translation } })),
        },
        amount: {
          value: amount,
          min: 1,
          max: 15,
          step: 1,
          transient: false,
          onChange: (amount) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, amount } })),
        },
        ambient: {
          value: ambient,
          min: 0,
          max: 1,
          step: 0.01,
          transient: false,
          onChange: (ambient) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, ambient } })),
        },
        intensity: {
          value: intensity,
          min: 0,
          max: 10,
          step: 0.01,
          transient: false,
          onChange: (intensity) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, intensity } })),
        },
        radius: {
          value: radius,
          min: 0.1,
          max: 100,
          step: 0.1,
          transient: false,
          onChange: (radius) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, radius } })),
        },
        scale: {
          value: scale,
          min: 0,
          max: 100,
          step: 0.1,
          transient: false,
          onChange: (scale) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, scale } })),
        },
        resolution: {
          value: resolution,
          options: [512, 1024, 2048],
          transient: false,
          onChange: (resolution) =>
            setSceneState((prevState) => ({ ...prevState, lighting: { ...prevState.lighting, resolution } })),
        },
      },
      { collapsed: true, order: 4 }
    ),
  }));

  useEffect(() => {
    set({ frames, alpha, scale, amount, radius, ambient, intensity, resolution, translation });
  }, [set, sceneState.lighting]);

  return (
    <>
      {!sceneState.selection && (
        <AccumulativeShadows
          uuid="scene-shadows"
          position={[0, 0, 0]}
          frames={frames}
          alphaTest={alpha}
          scale={scale}
          resolution={resolution}
        >
          <RandomizedLight
            amount={amount}
            radius={radius}
            ambient={ambient}
            intensity={intensity}
            mapSize={resolution / 2}
            position={[translation.x, translation.y, translation.z]}
          />
        </AccumulativeShadows>
      )}
    </>
  );
}

[fabiopolimeni]

Ok, for anyone having similar issue, I have resolved this generating a new react component key every time. I guess this force a rerender of the component which wouldn't happen otherwise. But, I am not sure why this is needed, if someone has a better hint please let me know.

      <AccumulativeShadows
          key={Math.random()}
          uuid="scene-shadows"
          position={[0, 0, 0]}
          frames={frames}
          alphaTest={alpha}
          scale={scale}
          resolution={resolution}
        >
          <RandomizedLight
            key={Math.random()}
            amount={amount}
            radius={radius}
            ambient={ambient}
            intensity={intensity}
            mapSize={resolution / 2}
            position={[translation.x, translation.y, translation.z]}
          />
        </AccumulativeShadows>