[docs] Clearer component pattern

I think it makes it clearer that its a components by showing props.
mui · Sep 17, 2023 · ffc58b3 · ffc58b3
1 parent 25d175c
commit ffc58b3
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/docs/data/data-grid/performance/performance.md b/docs/data/data-grid/performance/performance.md
@@ -10,14 +10,14 @@ re-render when their props change. But it's very easy to cause unnecessary re-re
 render, which means the `DataGrid` itself has no choice but to re-render as well.
 
 ```tsx
-function Component({ rows }) {
+function Component(props) {
   return (
     <DataGrid
-      rows={rows}
+      rows={props.rows}
       slots={{
         row: CustomRow,
       }}
-      cellModesModel={{ [rows[0].id]: { name: { mode: GridCellModes.Edit } } }}
+      cellModesModel={{ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }}
     />
   );
 }
@@ -31,13 +31,15 @@ const slots = {
   row: CustomRow,
 };
 
-function Component({ rows }) {
+function Component(props) {
   const cellModesModel = React.useMemo(
-    () => ({ [rows[0].id]: { name: { mode: GridCellModes.Edit } } }),
-    [rows],
+    () => ({ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }),
+    [props.rows],
   );
 
-  return <DataGrid rows={rows} slots={slots} cellModesModel={cellModesModel} />;
+  return (
+    <DataGrid rows={props.rows} slots={slots} cellModesModel={cellModesModel} />
+  );
 }
 ```