Skip to content

Navigation Menu

Sign in
Sign up

Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders #143

Open

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>

image

🔥 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>

image

Workaround

Changing the visibleEdgeColor of Outline element breaks it.
Workaround is to change the key of EffectComposer so 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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      AltStyle によって変換されたページ (->オリジナル) /