# Infinite canvas re-render when using @react-three/postprocessing

**URL:** <https://discourse.threejs.org/t/infinite-canvas-re-render-when-using-react-three-postprocessing/86953>\
**Category:** Questions\
**Created:** [September 12, 2025, 6:25pm UTC](https://discourse.threejs.org/t/infinite-canvas-re-render-when-using-react-three-postprocessing/86953 "2025-09-12T18:25:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkoziatynskyi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dkoziatynskyi/32/63166_2.png) [@dkoziatynskyi](https://discourse.threejs.org/u/dkoziatynskyi)\
**Post date:** [September 12, 2025, 6:25pm UTC](https://discourse.threejs.org/t/infinite-canvas-re-render-when-using-react-three-postprocessing/86953/1 "2025-09-12T18:25:51Z")

</div>

I am using `@react-three/postprocessing` to add Outline to a couple of meshes using `<Select />`, but whenever at least one `Select` tag is enabled, it causes the whole Canvas to infinitely re-render starting from `<App />` tag (with all its hooks etc).

Sandbox: [https://codesandbox.io/p/devbox/nice-sea-forked-zcl7qk?workspaceId=ws\_GaAtBYTSs6xV1m4c6jiSMt](https://codesandbox.io/p/devbox/nice-sea-forked-zcl7qk?workspaceId=ws_GaAtBYTSs6xV1m4c6jiSMt)

Here is the outlined component:

```javascript
import type { Mesh, MeshStandardMaterial } from 'three';
import type { GLTF } from 'three-stdlib';
import { useGLTF } from '@react-three/drei';
import { Select } from '@react-three/postprocessing';

import pcModelURL from '@/assets/models/new/room_pc.glb?url';

type GLTFResult = GLTF & {
  nodes: {
    PC: Mesh
  }
  materials: {
    Material: MeshStandardMaterial
  }
}

export default function PC() {
  const { nodes, materials } = useGLTF(pcModelURL) as GLTFResult;

  return (
    <Select enabled={true}>
      <group dispose={null}>
        <mesh
          name="PC"
          castShadow
          receiveShadow
          geometry={nodes.PC.geometry}
          material={materials.Material}
          position={[0.636, -0.812, -1.276]}
        />
      </group>
    </Select>
  );
}

useGLTF.preload(pcModelURL);

```

Effect composer:

```javascript
import { useThree } from '@react-three/fiber';
import { EffectComposer, Outline } from '@react-three/postprocessing'

export default function Effects() {
  const { size } = useThree();

  return (
    <EffectComposer stencilBuffer enableNormalPass={false} autoClear={false} multisampling={4}>
      <Outline visibleEdgeColor={0xffffff} hiddenEdgeColor={0xffffff} blur width={size.width * 1.25} edgeStrength={10} />
    </EffectComposer>
  );
}

```

And the `<Selection>` wrapper:

```javascript
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { PCFSoftShadowMap } from 'three';
import { Canvas } from '@react-three/fiber';
import { CameraControls, PerspectiveCamera, Bvh } from '@react-three/drei';
import { Selection } from '@react-three/postprocessing';

import PC from './components/PC';

const aspect = window.innerWidth / window.innerHeight;

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div className="CanvasWrapper">
      <Canvas
        shadows={{ type: PCFSoftShadowMap }}
        gl={{
          antialias: true,
          localClippingEnabled: true,
        }}
      >
        <Bvh firstHitOnly>
          <CameraControls
            makeDefault
            verticalDragToForward={false}
            dollyToCursor={false}
            infinityDolly={false}
            maxDistance={50}
            maxAzimuthAngle={0}
            minAzimuthAngle={-1.8}
            minPolarAngle={Math.PI / 6}
            maxPolarAngle={Math.PI / 2}
          />
          <PerspectiveCamera
            makeDefault
            fov={20}
            aspect={aspect}
            near={0.35}
            far={150}
            position={[-10, 5, 25]}
          />
          <Selection>
            <PC />
            <Effects />
          </Selection>
        </Bvh>
      </Canvas>
    </div>
  </StrictMode>
);

```

 ![Screenshot 2025-09-12 at 13.44.59](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/c/0cd00b745a99999620acaf9e2a7b7a7553cb25b1.png)

Would really appreciate any help!