Skip to content

Instantly share code, notes, and snippets.

@Josscii
Created April 18, 2022 05:35
Show Gist options
  • Save Josscii/aceccdfd802101d8db4d8b676265d849 to your computer and use it in GitHub Desktop.
Save Josscii/aceccdfd802101d8db4d8b676265d849 to your computer and use it in GitHub Desktop.
how to use context with children to avoid rerender
import GlobalSpinner from '@/components/GlobalSpinner'
import { contextFactory } from './helpers/contextFactory'
import { useToggleState } from '@/hooks/useToggleState'
type GlobalSpinnerContextProviderProps = {
children: React.ReactNode
}
const GlobalSpinnerContextProvider = (
props: GlobalSpinnerContextProviderProps
) => {
const { children } = props
const {
state: isSpinnerVisible,
open: showSpinner,
close: hideSpinner,
toggle: toggleSpinner,
} = useToggleState(false)
return (
<GlobalSpinnerContext.Provider
value={{
isSpinnerVisible,
showSpinner,
hideSpinner,
toggleSpinner,
}}
>
{children}
<GlobalSpinner />
</GlobalSpinnerContext.Provider>
)
}
export default GlobalSpinnerContextProvider
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment