How can I prevent the MaterialUI Switch from animating? - reactjs

Question

I'm new to React and making a Chrome extension with it.
Currently, I am using the Switch component from MaterialUI inside my popup page. How I am saving its state right now is by storing the state of each change in chrome.storage.local API. When I click back to the pop-up, I simply use the useEffect hook & fetch the state from chrome.storage.local & pass it as an argument to setState().
My issue with this is that it causes the toggle button to animate from off to on very briefly when you reopen the popup (as if you were manually toggling it). I'm aware it's because of the way I'm doing it (i.e, initializing the state of the toggle as false each time the pop-up is opened) but I'm currently stumped on doing this another way. Could anyone please help me? Thanks for reading!
MySwitchComponent.jsx
import React, { useState } from "react";
import { withStyles } from "#material-ui/core/styles";
import { Switch } from '#material-ui/core/';
const StyledSwitch = withStyles({
root: {
position: 'relative',
marginTop: '20px',
marginLeft: '90px'
},
})(Switch);
export default function NewSwitch() {
const [state, setState] = React.useState(false)
const handleChange = (event) => {
setState(event.target.checked);
chrome.storage.local.set({auto_delete_toggle: event.target.checked });
}
React.useEffect(() => {
chrome.storage.local.get(null, function(res){
setState(res.auto_delete_toggle);
})
});
return (
<StyledSwitch
checked={state}
onChange={handleChange}
>
</StyledSwitch>)
}
My popup.js just renders all the components encapsulated in a single in popup.html. Also, chrome.storage.local.get is asynchronous.
EDIT:
Here is a GIF to better illustrate my issue:

Answer 1

First, here's a sandbox that reproduces your issue. I've used a mockAsyncStorage (which is backed by window.localStorage) to mimic the async chrome.storage.local.get. You can see the undesired transition by clicking the switch so that it is checked, and then refreshing the page.
import React from "react";
import Switch from "#material-ui/core/Switch";
import mockAsyncStorage from "./mockAsyncStorage";
export default function App() {
const [checked, setChecked] = React.useState(false);
const handleChange = event => {
setChecked(event.target.checked);
mockAsyncStorage.set({ auto_delete_toggle: event.target.checked });
};
React.useEffect(() => {
mockAsyncStorage.get(null, function(res) {
setChecked(
res.auto_delete_toggle === undefined ? false : res.auto_delete_toggle
);
});
}, []);
return <Switch checked={checked} onChange={handleChange} />;
}
Below is one way to get rid of the transition. This initializes checked to undefined and while it is still undefined, it returns null instead of the switch so nothing is rendered until the appropriate initial state of the switch is known.
import React from "react";
import Switch from "#material-ui/core/Switch";
import mockAsyncStorage from "./mockAsyncStorage";
export default function App() {
const [checked, setChecked] = React.useState(undefined);
const handleChange = event => {
setChecked(event.target.checked);
mockAsyncStorage.set({ auto_delete_toggle: event.target.checked });
};
React.useEffect(() => {
mockAsyncStorage.get(null, function(res) {
setChecked(
res.auto_delete_toggle === undefined ? false : res.auto_delete_toggle
);
});
}, []);
if (checked === undefined) {
return null;
}
return <Switch checked={checked} onChange={handleChange} />;
}