Repository: facebook/react
File: compiler/apps/playground/components/Editor/EditorImpl.tsx (TypeScript)

Code before:
    language,
  ];
}

export default function Editor(): JSX.Element {
  const store = useStore();
  const deferredStore = useDeferredValue(store);
  const dispatchStore = useStoreDispatch();
  const {enqueueSnackbar} = useSnackbar();
  const [compilerOutput, language] = useMemo(
    () => compile(deferredStore.source, 'compiler'),
    [deferredStore.source],
  );
  const [linterOutput] = useMemo(
    () => compile(deferredStore.source, 'linter'),
    [deferredStore.source],
  );

  // TODO: Remove this once the config editor is more stable
  const [shouldShowConfig, setShouldShowConfig] = useState(false);

  useMountEffect(() => {
    if (typeof window !== 'undefined') {
      const urlParams = new URLSearchParams(window.location.search);
      setShouldShowConfig(urlParams.get('showConfig') === 'true');
    }

    // Initialize store
    let mountStore: Store;
    try {
      mountStore = initStoreFromUrlOrLocalStorage();
    } catch (e) {
      invariant(e instanceof Error, 'Only Error may be caught.');
      enqueueSnackbar(e.message, {
        variant: 'warning',
        ...createMessage(
          'Bad URL - fell back to the default Playground.',
          MessageLevel.Info,
          MessageSource.Playground,
        ),
      });
      mountStore = defaultStore;
    }
    dispatchStore({
      type: 'setStore',
      payload: {store: mountStore},
    });
  });

  let mergedOutput: CompilerOutput;
  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;

Review comment (suggestion):
This can be handled by `useSearchParams()` https://nextjs.org/docs/app/api-reference/functions/use-search-params

If this is currently a server component, you could just use the hook in `ConfigEditor` and make that the client boundary. Returning null if there's no param.

Code after:
    {kind: 'ok', results, transformOutput, errors: error.details},
    language,
  ];
}

export default function Editor(): JSX.Element {
  const store = useStore();
  const deferredStore = useDeferredValue(store);
  const dispatchStore = useStoreDispatch();
  const {enqueueSnackbar} = useSnackbar();
  const [compilerOutput, language] = useMemo(
    () => compile(deferredStore.source, 'compiler'),
    [deferredStore.source],
  );
  const [linterOutput] = useMemo(
    () => compile(deferredStore.source, 'linter'),
    [deferredStore.source],
  );

  // TODO: Remove this once the config editor is more stable
  const searchParams = useSearchParams();
  const search = searchParams.get('showConfig');
  const shouldShowConfig = search === 'true';

  useMountEffect(() => {
    // Initialize store
    let mountStore: Store;
    try {
      mountStore = initStoreFromUrlOrLocalStorage();
    } catch (e) {
      invariant(e instanceof Error, 'Only Error may be caught.');
      enqueueSnackbar(e.message, {
        variant: 'warning',
        ...createMessage(
          'Bad URL - fell back to the default Playground.',
          MessageLevel.Info,
          MessageSource.Playground,
        ),
      });
      mountStore = defaultStore;
    }
    dispatchStore({
      type: 'setStore',
      payload: {store: mountStore},
    });
  });

  let mergedOutput: CompilerOutput;
  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
  if (compilerOutput.kind === 'ok') {
    errors = linterOutput.kind === 'ok' ? [] : linterOutput.error.details;