Avoid re-rendering on theme change #661

creazy231 · 2022-01-05T06:52:47Z

creazy231
Jan 5, 2022

I have a Next.js Project with lots of content and when I switch the theme it re-renders the whole page because of the GeistProvider.

Is there a way to just replace used variables instead of re-rendering based on themeType?

Using it like:

// _app.js
const App = ({Component, pageProps}) => {
	const {
		darkModeActive
	} = useDarkMode();

	return (
		<>
			<GeistProvider themeType={darkModeActive ? 'dark' : 'light'}>
				<LoaderProvider>
					<StoreProvider>
						<Component {...pageProps} />
					</StoreProvider>
				</LoaderProvider>
			</GeistProvider>
		</>
	);
};

export default withDarkMode(App, {
	defaultMode: 'dark',
});

// _document.js
class MyDocument extends Document {
	static async getInitialProps(ctx) {
		const initialProps = await Document.getInitialProps(ctx)
		const styles = CssBaseline.flush();

		return {
			...initialProps,
			styles: (
				<>
					{initialProps.styles}
					{styles}
				</>
			)
		}
	}

	render() {
		return (
			<Html>
				<Head/>
				<body>
				<Main />
				<NextScript/>
				</body>
			</Html>
		)
	}
}

export default MyDocument;

EDIT:
Also noticed that when I set themeType on GeistProvider the page renders twice even if the themeType is static.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Avoid re-rendering on theme change #661

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Avoid re-rendering on theme change #661

creazy231 Jan 5, 2022

Replies: 0 comments

creazy231
Jan 5, 2022