Re-renders cause DPR to be reset to the initial value

[davcri]

Description

Suppose having:

function MyApp() {
  return <>
        {/* Canvas starts with dpr=0.1 */}
        <Canvas dpr={0.1}>
          <Box />
         
          {/* This callse setDpr() based on the app requirements. 
              EG: sets dpr to 1 in a useEffect() */}
          <DynamicDPR /> 
        </Canvas>
    </>
}

If MyApp re-renders then the Canvas DPR is reset to the initial value (0.1 in the previous example).

Minimal reproduction project

• https://codesandbox.io/p/sandbox/699c5l

Clicking on the button triggers a state change.

https://github.com/user-attachments/assets/09b6d1fb-9e92-499d-b311-ae40ae0e88d5

Similar issues

• https://github.com/pmndrs/react-three-fiber/issues/3099

Workaround

Set Canvas dpr prop directly as shown here: https://r3f.docs.pmnd.rs/advanced/scaling-performance#performance-monitoring