Repository: strapi/strapi
File: packages/core/content-manager/admin/src/pages/EditView/EditViewPage.tsx (TypeScript)

Code before:
} from '@strapi/admin/strapi-admin';
import { Grid, Main, Tabs } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { useLocation, useParams } from 'react-router-dom';
import { styled } from 'styled-components';

import { SINGLE_TYPES } from '../../constants/collections';
import { PERMISSIONS } from '../../constants/plugin';
import { DocumentRBAC, useDocumentRBAC } from '../../features/DocumentRBAC';
import { useDoc, type UseDocument } from '../../hooks/useDocument';
import { useDocumentLayout } from '../../hooks/useDocumentLayout';
import { useLazyComponents } from '../../hooks/useLazyComponents';
import { useOnce } from '../../hooks/useOnce';
import { getTranslation } from '../../utils/translations';
import { createYupSchema } from '../../utils/validation';

import { FormLayout } from './components/FormLayout';
import { Header } from './components/Header';
import { Panels } from './components/Panels';

/* -------------------------------------------------------------------------------------------------
 * EditViewPage
 * -----------------------------------------------------------------------------------------------*/

// Needs to be wrapped in a component to have access to the form context via a hook.
// Using the render prop instead would cause unnecessary re-renders of Form children
const BlockerWrapper = () => {
  const resetForm = useForm('BlockerWrapper', (state) => state.resetForm);

  // We reset the form to the published version to avoid errors like – https://strapi-inc.atlassian.net/browse/CONTENT-2284
  return <Blocker onProceed={resetForm} />;
};

const EditViewPage = () => {
  const location = useLocation();
  const [
    {
      query: { status },
    },
    setQuery,
  ] = useQueryParams<{ status: 'draft' | 'published' }>({
    status: 'draft',
  });
  const { formatMessage } = useIntl();
  const { toggleNotification } = useNotification();

  const doc = useDoc();
  const {
    document,
    meta,
    isLoading: isLoadingDocument,

Review comment (suggestion):
```suggestion
// Using the Form component's render prop instead would cause unnecessary re-renders of Form children
```

Code after:
} from '@strapi/admin/strapi-admin';
import { Grid, Main, Tabs } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { useLocation, useParams } from 'react-router-dom';
import { styled } from 'styled-components';

import { SINGLE_TYPES } from '../../constants/collections';
import { PERMISSIONS } from '../../constants/plugin';
import { DocumentRBAC, useDocumentRBAC } from '../../features/DocumentRBAC';
import { useDoc, type UseDocument } from '../../hooks/useDocument';
import { useDocumentLayout } from '../../hooks/useDocumentLayout';
import { useLazyComponents } from '../../hooks/useLazyComponents';
import { useOnce } from '../../hooks/useOnce';
import { getTranslation } from '../../utils/translations';
import { createYupSchema } from '../../utils/validation';

import { FormLayout } from './components/FormLayout';
import { Header } from './components/Header';
import { Panels } from './components/Panels';

/* -------------------------------------------------------------------------------------------------
 * EditViewPage
 * -----------------------------------------------------------------------------------------------*/

// Needs to be wrapped in a component to have access to the form context via a hook.
// Using the Form component's render prop instead would cause unnecessary re-renders of Form children
const BlockerWrapper = () => {
  const resetForm = useForm('BlockerWrapper', (state) => state.resetForm);

  // We reset the form to the published version to avoid errors like – https://strapi-inc.atlassian.net/browse/CONTENT-2284
  return <Blocker onProceed={resetForm} />;
};

const EditViewPage = () => {
  const location = useLocation();
  const [
    {
      query: { status },
    },
    setQuery,
  ] = useQueryParams<{ status: 'draft' | 'published' }>({
    status: 'draft',
  });
  const { formatMessage } = useIntl();
  const { toggleNotification } = useNotification();

  const doc = useDoc();
  const {
    document,
    meta,
    isLoading: isLoadingDocument,