How to show/hide spinners, snackbars, or other transient components with React Function Components - reactjs

Question

Is it better to render spinners, snackbars, etc. in separate DOM elements instead of adding them to the main application component tree? In React class components, it was really easy to get a reference to the class components methods to show/hide the spinner. With the new React Hooks function components, it's not so easy anymore. If I put the spinner in the main component tree, could I use the new "useContext" hook to show/hide the spinner?
Below is a React Hooks global spinner using Material-UI that works but is very hacky. How can this be made more elegant?
namespace Spinner {
'use strict';
export let show: any; // Show method ref.
export let hide: any; // Hide method ref.
export function Render() {
const [visible, setVisible] = React.useState(false); //Set refresh method.
function showIt() {
setVisible(true); // Show spinner.
}
function hideIt() {
setVisible(false); // Hide spinner.
}
const styles: any = createStyles({
col1Container: { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
});
return (
<div>
{visible && <div style={styles.col1Container}>
<CircularProgress key={Util.uid()}
color='secondary'
size={30}
thickness={3.6}
/>
</div>}
<SetSpinnerRefs showRef={showIt} hideRef={hideIt} />
</div>
); // end return.
} // end function.
const mounted: boolean = true;
interface iProps {
showRef();
hideRef();
}
function SetSpinnerRefs(props: iProps) {
// ComponentDidMount.
React.useEffect(() => {
Spinner.show = props.showRef;
Spinner.hide = props.hideRef;
}, [mounted]);
return (<span />);
}
} // end module.

Answer 1

The problem is similar to this one, and a solution for spinners would be the same as the one for modal windows. React hooks don't change the way it works but can make it more concise.
There is supposed to be single spinner instance in component hierarchy:
const SpinnerContext = React.createContext();
const SpinnerContainer = props => {
const [visible, setVisible] = React.useState(false);
const spinner = useMemo(() => ({
show: () => setVisible(true),
hide: () => setVisible(false),
}), []);
render() {
return <>
{visible && <Spinner />}
<SpinnerContext.Provider value={spinner}>
{props.children}
</SpinnerContext.Provider>
</>;
}
}
Which is passed with a context:
const ComponentThatUsesSpinner = props => {
const spinner = useContext(SpinnerContext);
...
spinner.hide();
...
}
<SpinnerContainer>
...
<ComponentThatUsesSpinner />
...
</SpinnerContainer>

Answer 2

In React class components, it was really easy to get a reference to the class components methods to show/hide the spinner
You can continue to use class components. They are not going anywhere 🌹
The not so good way
It is actually poor practice in my opinion to use class methods to show and hide a spinner. Assuming your api looks like
<Spinner {ref=>this.something=ref}/>
And you use
this.something.show(); // or .hide
The better way
<Spinner shown={state.shown}/>
Now you get to change state.shown instead of storing the ref and using show / hide.

Answer 3

Although I think that Basarat's answer is the modern way of solving this problem, the below code is the way I ended up doing it. This way I only need one line of code to build the spinner and only one line of code to show/hide it.
<Spinner.Render /> {/* Build spinner component */}
Spinner.show(); //Show spinner.
namespace Spinner {
'use strict';
export let show: any; //Ref to showIt method.
export let hide: any; //Ref to hideIt method.
export function Render() {
const [visible, setVisible] = React.useState(false); //Set refresh method.
function showIt() {
setVisible(true); //Show spinner.
}
function hideIt() {
setVisible(false); //Hide spinner.
}
const showRef: any = React.useRef(showIt);
const hideRef: any = React.useRef(hideIt);
//Component did mount.
React.useEffect(() => {
Spinner.show = showRef.current;
Spinner.hide = hideRef.current;
}, []);
const styles: any = createStyles({
row1Container: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
});
return (
<div>
{visible && <div style={styles.row1Container}>
<CircularProgress
color='secondary'
size={30}
thickness={3.6}
/>
</div>}
</div>
); //end return.
} //end function.
} //end module.