Skip to content

Commit

Permalink
style: enforce prop immutability in new next app (#58845)
Browse files Browse the repository at this point in the history 
- fixes #58844

Co-authored-by: Steven <[email protected]>
  • Loading branch information
@hamirmahal @styfle
hamirmahal and styfle authored Jan 5, 2024
1 parent ff058d6 commit f60c609
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
4 changes: 2 additions & 2 deletions packages/create-next-app/templates/app-tw/ts/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export const metadata: Metadata = {

export default function RootLayout({
children,
}: {
}: Readonly<{
children: React.ReactNode
}) {
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
Expand Down
4 changes: 2 additions & 2 deletions packages/create-next-app/templates/app/ts/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export const metadata: Metadata = {

export default function RootLayout({
children,
}: {
}: Readonly<{
children: React.ReactNode
}) {
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
Expand Down

1 comment on commit f60c609

@sefakeles
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using Readonly<Type> utility type like this is not fit for purpose.

Destructuring props creates new variables. TypeScript will not consider children variable as readonly, and therefore will not throw an error.

The correct usage would be:

interface RootLayoutProps {
  children: React.ReactNode
}

export default function RootLayout(props: Readonly<RootLayoutProps>) {
  props.children = undefined  // Cannot assign to 'children' because it is a read-only property.
  return props.children
}

Yet, not everyone uses props like this. People destructuring props will not benefit from this change.

Please sign in to comment.