State update on an unmounted component #60
Description
Hello!
I keep getting this warning when I navigate to another page. I tried using freeze on componentWillUnmount but it didn't really help (example below). Version 1.3.15 on React 16.12.0 with Gatsby.
Warning:
index.js:2177 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Plx (at Hero.js:287)
in div (at Hero.js:286)
in div (at Holder.js:10)
in Holder (at Hero.js:285)
in div (at Hero.js:284)
in Hero (at services.js:205)
in Layout (at services.js:203)
in Services (at Context.js:15)
in WrapperComponent (created by HotExportedWrapperComponent)
in AppContainer (created by HotExportedWrapperComponent)
in HotExportedWrapperComponent (created by PageRenderer)
in div (at TransitionRenderer.js:49)
in TransitionRenderer (at TransitionHandler.js:124)
in Transition (at delayTransitionRender.js:30)
in DelayedTransitionWrapper (at TransitionHandler.js:46)
Example:
const plxSubtitle = [
{
start: 0,
end: "10vh",
easing: "ease",
properties: [
{
startValue: 0,
endValue: 5,
unit: "vh",
property: "translateY",
},
],
},
{
start: "10vh",
end: "30vh",
easing: "ease",
properties: [
{
startValue: 5,
endValue: -10,
unit: "vh",
property: "translateY",
},
],
},
]
const plxTitle = [
{
start: "25vh",
end: "60vh",
easing: "ease",
properties: [
{
startValue: 0,
endValue: -10,
unit: "vh",
property: "translateY",
},
],
},
]
export const Hero = props => {
const [freeze, setFreeze] = useState(true)
useEffect(() => {
setFreeze(false)
return () => {
setFreeze(true)
}
}, [])
return (
<Holder>
<Plx
parallaxData={plxSubtitle}
freeze={freeze}
className={styles.subtitlePlx}
>
<h4 className={styles.subtitle}>{props.subtitle}</h4>
</Plx>
<Plx parallaxData={plxTitle} freeze={freeze} className={styles.titlePlx}>
<h1 className={styles.title}>{props.title}</h1>
</Plx>
</Holder>
)
}