pmndrs / pmndrs/react-postprocessing
Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 134
- Avg merge
- 4m
- Merged PRs (30d)
- 4
Description
Problem
Demo of bug and workaround: https://codesandbox.io/s/bug-change-outline-color-dmu52j?file=/src/App.js
✅ Constant/fixed visibleEdgeColor
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur edgeStrength={100} width={500}
visibleEdgeColor="red"
/>
</EffectComposer>
🔥 Dynamically changing visibleEdgeColor breaks Outline, stops rendering
+ // `color` variable is dynamically changing
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur edgeStrength={100} width={500}
+ visibleEdgeColor={color}
/>
</EffectComposer>
Workaround
Changing the
visibleEdgeColorof Outline element breaks it.
Workaround is to change thekeyofEffectComposerso everything re-mounts and re-renders.
<EffectComposer
multisampling={8} autoClear={false}
+ key={color}
>
<Outline
blur edgeStrength={100} width={500}
- visibleEdgeColor={"red"}
+ visibleEdgeColor={color}
/>
</EffectComposer>
To see this in action, change the APPLY_WORKAROUND in the demo sandbox.
Is this expected behaviour? Thanks!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The reproduction is the linked CodeSandbox using EffectComposer and Outline; start by running it and comparing fixed versus changing visibleEdgeColor. Trace those component entry points to find why the prop update stops rendering, and consider the issue done when the color can change without changing EffectComposer's key while rendering continues.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, three.js, typescript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100