Fernando Rojo nandorojo

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

	import classNameProp from 'class-name-prop';
	import { useRouter } from 'next/router';
	import React from 'react';
	import styles from './RouteIndicator.module.css';

	const DONE_DURATION = 250;

	export default function RouteIndicator() {
	const router = useRouter();

	// web
	import P, { ArrowContainer } from 'react-tiny-popover'
	import React from 'react'

	export default ({
	visible = false,
	position,
	onClose,
	children,
	content = null,

	// Target state
	var tx = 0;
	var ty = 0;
	var scale = 1;

	function visualiseTargetState() {
	box.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
	}

	const App = createAppContainer(
	createStack({

	LoggedSwitch: createSwitch({

	// When user is authenticated
	LoggedIn: createStack({

	// The logged in root is generally a tab or drawer navigator
	LoggedInRoot: createTabsOrDrawer({

	import React, { useRef, useEffect, memo } from 'react'
	import { useRouter } from 'next/router'

	const ROUTES_TO_RETAIN = ['/dashboard', '/top', '/recent', 'my-posts']

	const App = ({ Component, pageProps }) => {
	const router = useRouter()
	const retainedComponents = useRef({})

	const isRetainableRoute = ROUTES_TO_RETAIN.includes(router.asPath)

	import * as React from "react";
	import { TouchableOpacity, Text } from "react-native";
	import { Notifications } from "expo"
	import { useNotification } from "./useNotification";

	const sendNotification = async () => await Notifications.presentLocalNotificationAsync(
	{
	title: "Notified!",
	body: "Hello, World!",
	data: {}

	// This is a worker that can be deployed in a desperate situation in order
	// to disable all service worker caching by overwriting the running worker
	// with a no-op worker.
	//
	// Keep it close for when you need it.

	self.addEventListener("install", () => {
	// Activate immediately, taking control from any broken service workers
	self.skipWaiting();
	});

	import useScrollRestoration from "utils/hooks/useScrollRestoration";

	const App = ({ Component, pageProps, router }) => {
	useScrollRestoration(router);
	return <Component {...pageProps} />;
	};

	export default App;