From e10fe59cd0d524800dce5f19f15baf08d7e04557 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Dec 2022 11:12:44 +0800 Subject: [PATCH 1/6] refactor: merge ResizeContext --- src/Body/index.tsx | 7 +++---- src/Table.tsx | 23 ++++++++++++++++++----- src/context/ResizeContext.tsx | 10 ---------- src/context/TableContext.tsx | 5 ++++- 4 files changed, 25 insertions(+), 20 deletions(-) delete mode 100644 src/context/ResizeContext.tsx diff --git a/src/Body/index.tsx b/src/Body/index.tsx index 0e448be7d..df3e2b833 100644 --- a/src/Body/index.tsx +++ b/src/Body/index.tsx @@ -1,11 +1,10 @@ +import { useContext } from '@rc-component/context'; import * as React from 'react'; import BodyContext from '../context/BodyContext'; import HoverContext from '../context/HoverContext'; import type { PerfRecord } from '../context/PerfContext'; import PerfContext from '../context/PerfContext'; -import ResizeContext from '../context/ResizeContext'; import TableContext from '../context/TableContext'; -import { useContext } from '@rc-component/context'; import useFlattenRecords from '../hooks/useFlattenRecords'; import type { GetComponentProps, GetRowKey, Key } from '../interface'; import { getColumnsKey } from '../utils/valueUtil'; @@ -34,10 +33,10 @@ function Body({ emptyNode, childrenColumnName, }: BodyProps) { - const onColumnResize = useContext(ResizeContext, 'onColumnResize'); - const { prefixCls, getComponent } = useContext(TableContext, [ + const { prefixCls, getComponent, onColumnResize } = useContext(TableContext, [ 'prefixCls', 'getComponent', + 'onColumnResize', ]); const flattenColumns = useContext(BodyContext, 'flattenColumns'); diff --git a/src/Table.tsx b/src/Table.tsx index b3eb3a725..d8188af92 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -40,7 +40,6 @@ import ColGroup from './ColGroup'; import { EXPAND_COLUMN } from './constant'; import BodyContext from './context/BodyContext'; import ExpandedRowContext from './context/ExpandedRowContext'; -import ResizeContext from './context/ResizeContext'; import StickyContext from './context/StickyContext'; import TableContext from './context/TableContext'; import FixedHolder from './FixedHolder'; @@ -829,6 +828,7 @@ function Table(tableProps: TableProps ({ + // Table prefixCls, getComponent, scrollbarSize, @@ -837,8 +837,23 @@ function Table(tableProps: TableProps(tableProps: TableProps ({ onColumnResize }), [onColumnResize]); - return ( - {fullTable} + {fullTable} diff --git a/src/context/ResizeContext.tsx b/src/context/ResizeContext.tsx deleted file mode 100644 index d5880789c..000000000 --- a/src/context/ResizeContext.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type * as React from 'react'; -import { createContext } from '@rc-component/context'; - -interface ResizeContextProps { - onColumnResize: (columnKey: React.Key, width: number) => void; -} - -const ResizeContext = createContext(); - -export default ResizeContext; diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index 69acb2765..fe68db094 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -3,7 +3,7 @@ import type { GetComponent } from '../interface'; import type { FixedInfo } from '../utils/fixUtil'; export interface TableContextProps { - // Table context + // Table prefixCls: string; getComponent: GetComponent; @@ -15,6 +15,9 @@ export interface TableContextProps { fixedInfoList: readonly FixedInfo[]; isSticky: boolean; + + // Column + onColumnResize: (columnKey: React.Key, width: number) => void; } const TableContext = createContext(); From 635dc588c78c84a03aaa765bba840c231f1f0f3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Dec 2022 11:19:40 +0800 Subject: [PATCH 2/6] refactor: merge hover context --- src/Body/index.tsx | 18 +----------------- src/Cell/index.tsx | 17 +++++++++++------ src/Table.tsx | 19 +++++++++++++++++++ src/context/HoverContext.tsx | 11 ----------- src/context/TableContext.tsx | 5 +++++ 5 files changed, 36 insertions(+), 34 deletions(-) delete mode 100644 src/context/HoverContext.tsx diff --git a/src/Body/index.tsx b/src/Body/index.tsx index df3e2b833..c5480e370 100644 --- a/src/Body/index.tsx +++ b/src/Body/index.tsx @@ -1,7 +1,6 @@ import { useContext } from '@rc-component/context'; import * as React from 'react'; import BodyContext from '../context/BodyContext'; -import HoverContext from '../context/HoverContext'; import type { PerfRecord } from '../context/PerfContext'; import PerfContext from '../context/PerfContext'; import TableContext from '../context/TableContext'; @@ -48,15 +47,6 @@ function Body({ renderWithProps: false, }); - // ====================== Hover ======================= - const [startRow, setStartRow] = React.useState(-1); - const [endRow, setEndRow] = React.useState(-1); - - const onHover = React.useCallback((start: number, end: number) => { - setStartRow(start); - setEndRow(end); - }, []); - // ====================== Render ====================== const bodyNode = React.useMemo(() => { const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody'); @@ -139,13 +129,7 @@ function Body({ flattenData, ]); - return ( - - - {bodyNode} - - - ); + return {bodyNode}; } const MemoBody = React.memo(Body); diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index 32c595133..c4bf78db3 100644 --- a/src/Cell/index.tsx +++ b/src/Cell/index.tsx @@ -6,10 +6,10 @@ import getValue from 'rc-util/lib/utils/get'; import warning from 'rc-util/lib/warning'; import * as React from 'react'; import BodyContext from '../context/BodyContext'; -import type { HoverContextProps } from '../context/HoverContext'; -import HoverContext from '../context/HoverContext'; import PerfContext from '../context/PerfContext'; import StickyContext from '../context/StickyContext'; +import type { TableContextProps } from '../context/TableContext'; +import TableContext from '../context/TableContext'; import type { AlignType, CellEllipsisType, @@ -44,7 +44,7 @@ function isRefComponent(component: CustomizeComponent) { } interface InternalCellProps - extends Pick { + extends Pick { prefixCls?: string; className?: string; record?: RecordType; @@ -89,7 +89,7 @@ interface InternalCellProps export type CellProps = Omit< InternalCellProps, - keyof HoverContextProps + keyof TableContextProps >; const getTitleFromCellRenderChildren = ({ @@ -347,8 +347,13 @@ const WrappedCell = React.forwardRef((props: CellProps, ref: React.Ref const mergedColSpan = colSpan ?? cellColSpan; const mergedRowSpan = rowSpan ?? cellRowSpan; - const { onHover, hovering } = useContext(HoverContext, cxt => { - const isHovering = inHoverRange(index, mergedRowSpan || 1, cxt?.startRow, cxt?.endRow); + const { onHover, hovering } = useContext(TableContext, cxt => { + const isHovering = inHoverRange( + index, + mergedRowSpan || 1, + cxt?.hoverStartRow, + cxt?.hoverEndRow, + ); return { onHover: cxt?.onHover, diff --git a/src/Table.tsx b/src/Table.tsx index d8188af92..770e44cf9 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -261,6 +261,15 @@ function Table(tableProps: TableProps { + setStartRow(start); + setEndRow(end); + }, []); + // ====================== Expand ====================== const expandableConfig = getExpandableProps(props); @@ -840,6 +849,11 @@ function Table(tableProps: TableProps(tableProps: TableProps void; -} - -const HoverContext = createContext(); - -export default HoverContext; diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index fe68db094..137ba7784 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -18,6 +18,11 @@ export interface TableContextProps { // Column onColumnResize: (columnKey: React.Key, width: number) => void; + + // Row + hoverStartRow: number; + hoverEndRow: number; + onHover: (start: number, end: number) => void; } const TableContext = createContext(); From adf06cdb369f603d4c5ad8776d3c7971c31ff50b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Dec 2022 11:23:40 +0800 Subject: [PATCH 3/6] refactor: merge sticky context --- src/Cell/index.tsx | 3 +-- src/Table.tsx | 19 +++++++++---------- src/context/StickyContext.tsx | 6 ------ src/context/TableContext.tsx | 1 + 4 files changed, 11 insertions(+), 18 deletions(-) delete mode 100644 src/context/StickyContext.tsx diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index c4bf78db3..79921cbd7 100644 --- a/src/Cell/index.tsx +++ b/src/Cell/index.tsx @@ -7,7 +7,6 @@ import warning from 'rc-util/lib/warning'; import * as React from 'react'; import BodyContext from '../context/BodyContext'; import PerfContext from '../context/PerfContext'; -import StickyContext from '../context/StickyContext'; import type { TableContextProps } from '../context/TableContext'; import TableContext from '../context/TableContext'; import type { @@ -146,7 +145,7 @@ function Cell( const cellPrefixCls = `${prefixCls}-cell`; const perfRecord = React.useContext(PerfContext); - const supportSticky = React.useContext(StickyContext); + const supportSticky = useContext(TableContext, 'supportSticky'); const allColumnsFixedLeft = useContext(BodyContext, 'allColumnsFixedLeft'); // ==================== Child Node ==================== diff --git a/src/Table.tsx b/src/Table.tsx index 770e44cf9..81c31f1f9 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -40,7 +40,6 @@ import ColGroup from './ColGroup'; import { EXPAND_COLUMN } from './constant'; import BodyContext from './context/BodyContext'; import ExpandedRowContext from './context/ExpandedRowContext'; -import StickyContext from './context/StickyContext'; import TableContext from './context/TableContext'; import FixedHolder from './FixedHolder'; import Footer, { FooterComponents } from './Footer'; @@ -846,6 +845,7 @@ function Table(tableProps: TableProps(tableProps: TableProps(tableProps: TableProps - - - - {fullTable} - - - - + + + + {fullTable} + + + ); } diff --git a/src/context/StickyContext.tsx b/src/context/StickyContext.tsx deleted file mode 100644 index 420e8cc79..000000000 --- a/src/context/StickyContext.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from 'react'; - -// Tell cell that browser support sticky -const StickyContext = React.createContext(false); - -export default StickyContext; diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index 137ba7784..6d0f6cc20 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -15,6 +15,7 @@ export interface TableContextProps { fixedInfoList: readonly FixedInfo[]; isSticky: boolean; + supportSticky: boolean; // Column onColumnResize: (columnKey: React.Key, width: number) => void; From 178d89b6f1ae7f3af64a17b312341f5ca975ffe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Dec 2022 11:37:00 +0800 Subject: [PATCH 4/6] refactor: merge body context --- src/Body/BodyRow.tsx | 13 ++++---- src/Body/index.tsx | 5 ++- src/Cell/index.tsx | 9 ++--- src/Table.tsx | 64 +++++++++++++++++------------------- src/context/BodyContext.tsx | 36 -------------------- src/context/TableContext.tsx | 36 ++++++++++++++++---- 6 files changed, 72 insertions(+), 91 deletions(-) delete mode 100644 src/context/BodyContext.tsx diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index fe3f27214..4d5fefaca 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -1,9 +1,8 @@ +import { useContext } from '@rc-component/context'; import classNames from 'classnames'; import * as React from 'react'; import Cell from '../Cell'; -import BodyContext from '../context/BodyContext'; import TableContext from '../context/TableContext'; -import { useContext } from '@rc-component/context'; import type { ColumnType, CustomizeComponent, @@ -52,11 +51,9 @@ function BodyRow( scopeCellComponent, childrenColumnName, } = props; - const { prefixCls, fixedInfoList } = useContext(TableContext, [ - 'prefixCls', - 'fixedInfoList', - ]); const { + prefixCls, + fixedInfoList, flattenColumns, expandableType, expandRowByClick, @@ -67,7 +64,9 @@ function BodyRow( expandIcon, expandedRowRender, expandIconColumnIndex, - } = useContext(BodyContext, [ + } = useContext(TableContext, [ + 'prefixCls', + 'fixedInfoList', 'flattenColumns', 'expandableType', 'expandRowByClick', diff --git a/src/Body/index.tsx b/src/Body/index.tsx index c5480e370..30606150a 100644 --- a/src/Body/index.tsx +++ b/src/Body/index.tsx @@ -1,6 +1,5 @@ import { useContext } from '@rc-component/context'; import * as React from 'react'; -import BodyContext from '../context/BodyContext'; import type { PerfRecord } from '../context/PerfContext'; import PerfContext from '../context/PerfContext'; import TableContext from '../context/TableContext'; @@ -32,12 +31,12 @@ function Body({ emptyNode, childrenColumnName, }: BodyProps) { - const { prefixCls, getComponent, onColumnResize } = useContext(TableContext, [ + const { prefixCls, getComponent, onColumnResize, flattenColumns } = useContext(TableContext, [ 'prefixCls', 'getComponent', 'onColumnResize', + 'flattenColumns', ]); - const flattenColumns = useContext(BodyContext, 'flattenColumns'); const flattenData: { record: RecordType; indent: number; index: number }[] = useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey); diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index 79921cbd7..73a3ea875 100644 --- a/src/Cell/index.tsx +++ b/src/Cell/index.tsx @@ -5,7 +5,6 @@ import { supportRef } from 'rc-util/lib/ref'; import getValue from 'rc-util/lib/utils/get'; import warning from 'rc-util/lib/warning'; import * as React from 'react'; -import BodyContext from '../context/BodyContext'; import PerfContext from '../context/PerfContext'; import type { TableContextProps } from '../context/TableContext'; import TableContext from '../context/TableContext'; @@ -88,7 +87,7 @@ interface InternalCellProps export type CellProps = Omit< InternalCellProps, - keyof TableContextProps + keyof Omit >; const getTitleFromCellRenderChildren = ({ @@ -145,8 +144,10 @@ function Cell( const cellPrefixCls = `${prefixCls}-cell`; const perfRecord = React.useContext(PerfContext); - const supportSticky = useContext(TableContext, 'supportSticky'); - const allColumnsFixedLeft = useContext(BodyContext, 'allColumnsFixedLeft'); + const { supportSticky, allColumnsFixedLeft } = useContext(TableContext, [ + 'supportSticky', + 'allColumnsFixedLeft', + ]); // ==================== Child Node ==================== const [childNode, legacyCellProps] = React.useMemo< diff --git a/src/Table.tsx b/src/Table.tsx index 81c31f1f9..d5c99ed80 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -38,7 +38,6 @@ import * as React from 'react'; import Body from './Body'; import ColGroup from './ColGroup'; import { EXPAND_COLUMN } from './constant'; -import BodyContext from './context/BodyContext'; import ExpandedRowContext from './context/ExpandedRowContext'; import TableContext from './context/TableContext'; import FixedHolder from './FixedHolder'; @@ -847,7 +846,23 @@ function Table(tableProps: TableProps col.fixed === 'left'), + // Column + columns, + flattenColumns, onColumnResize, // Row @@ -861,38 +876,11 @@ function Table(tableProps: TableProps ({ - ...columnContext, - tableLayout: mergedTableLayout, - rowClassName, - expandedRowClassName, - expandIcon: mergedExpandIcon, - expandableType, - expandRowByClick, - expandedRowRender, - onTriggerExpand, - expandIconColumnIndex, - indentSize, - allColumnsFixedLeft: columnContext.flattenColumns.every(col => col.fixed === 'left'), - }), - [ - columnContext, + // Body mergedTableLayout, rowClassName, expandedRowClassName, @@ -903,6 +891,16 @@ function Table(tableProps: TableProps(tableProps: TableProps - - - {fullTable} - - + + {fullTable} + ); } diff --git a/src/context/BodyContext.tsx b/src/context/BodyContext.tsx deleted file mode 100644 index 166add7dc..000000000 --- a/src/context/BodyContext.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { createContext } from '@rc-component/context'; -import type { - ColumnsType, - ColumnType, - DefaultRecordType, - ExpandableType, - ExpandedRowRender, - RenderExpandIcon, - RowClassName, - TableLayout, - TriggerEventHandler, -} from '../interface'; - -export interface BodyContextProps { - rowClassName: string | RowClassName; - expandedRowClassName: RowClassName; - - columns: ColumnsType; - flattenColumns: readonly ColumnType[]; - - tableLayout: TableLayout; - - indentSize: number; - expandableType: ExpandableType; - expandRowByClick: boolean; - expandedRowRender: ExpandedRowRender; - expandIcon: RenderExpandIcon; - onTriggerExpand: TriggerEventHandler; - expandIconColumnIndex: number; - allColumnsFixedLeft: boolean; -} - -// const BodyContext = React.createContext(null); -const BodyContext = createContext(); - -export default BodyContext; diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index 6d0f6cc20..6e0204131 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -1,23 +1,45 @@ import { createContext } from '@rc-component/context'; -import type { GetComponent } from '../interface'; +import type { + ColumnsType, + ColumnType, + ExpandableType, + ExpandedRowRender, + GetComponent, + RenderExpandIcon, + RowClassName, + TableLayout, + TriggerEventHandler, +} from '../interface'; import type { FixedInfo } from '../utils/fixUtil'; -export interface TableContextProps { +export interface TableContextProps { // Table prefixCls: string; - getComponent: GetComponent; - scrollbarSize: number; - direction: 'ltr' | 'rtl'; - fixedInfoList: readonly FixedInfo[]; - isSticky: boolean; supportSticky: boolean; + // Body + rowClassName: string | RowClassName; + expandedRowClassName: RowClassName; + + tableLayout: TableLayout; + + indentSize: number; + expandableType: ExpandableType; + expandRowByClick: boolean; + expandedRowRender: ExpandedRowRender; + expandIcon: RenderExpandIcon; + onTriggerExpand: TriggerEventHandler; + expandIconColumnIndex: number; + allColumnsFixedLeft: boolean; + // Column + columns: ColumnsType; + flattenColumns: readonly ColumnType[]; onColumnResize: (columnKey: React.Key, width: number) => void; // Row From 587009b7ce68bdfcabce93ce8981d3015a8b7822 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Dec 2022 11:41:20 +0800 Subject: [PATCH 5/6] refactor: merge Expand context --- src/Body/ExpandedRow.tsx | 10 ++++------ src/Table.tsx | 29 +++++++++++------------------ src/context/ExpandedRowContext.tsx | 12 ------------ src/context/TableContext.tsx | 4 ++++ 4 files changed, 19 insertions(+), 36 deletions(-) delete mode 100644 src/context/ExpandedRowContext.tsx diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx index c20be0c0d..a3ab140ae 100644 --- a/src/Body/ExpandedRow.tsx +++ b/src/Body/ExpandedRow.tsx @@ -1,8 +1,7 @@ +import { useContext } from '@rc-component/context'; import * as React from 'react'; import Cell from '../Cell'; -import ExpandedRowContext from '../context/ExpandedRowContext'; import TableContext from '../context/TableContext'; -import { useContext } from '@rc-component/context'; import type { CustomizeComponent } from '../interface'; export interface ExpandedRowProps { @@ -26,10 +25,9 @@ function ExpandedRow({ colSpan, isEmpty, }: ExpandedRowProps) { - const scrollbarSize = useContext(TableContext, 'scrollbarSize'); - const { fixHeader, fixColumn, componentWidth, horizonScroll } = useContext( - ExpandedRowContext, - ['fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'], + const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext( + TableContext, + ['scrollbarSize', 'fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'], ); // Cache render node diff --git a/src/Table.tsx b/src/Table.tsx index d5c99ed80..e8a934007 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -38,7 +38,6 @@ import * as React from 'react'; import Body from './Body'; import ColGroup from './ColGroup'; import { EXPAND_COLUMN } from './constant'; -import ExpandedRowContext from './context/ExpandedRowContext'; import TableContext from './context/TableContext'; import FixedHolder from './FixedHolder'; import Footer, { FooterComponents } from './Footer'; @@ -846,6 +845,11 @@ function Table(tableProps: TableProps(tableProps: TableProps(tableProps: TableProps ({ - componentWidth, - fixHeader, - fixColumn, - horizonScroll, - }), - [componentWidth, fixHeader, fixColumn, horizonScroll], - ); - - return ( - - - {fullTable} - - - ); + return {fullTable}; } const ImmutableTable = makeImmutable(Table); diff --git a/src/context/ExpandedRowContext.tsx b/src/context/ExpandedRowContext.tsx deleted file mode 100644 index 39b91e420..000000000 --- a/src/context/ExpandedRowContext.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createContext } from '@rc-component/context'; - -export interface ExpandedRowProps { - componentWidth: number; - fixHeader: boolean; - fixColumn: boolean; - horizonScroll: boolean; -} - -const ExpandedRowContext = createContext(null); - -export default ExpandedRowContext; diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index 6e0204131..049181378 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -21,6 +21,10 @@ export interface TableContextProps { fixedInfoList: readonly FixedInfo[]; isSticky: boolean; supportSticky: boolean; + componentWidth: number; + fixHeader: boolean; + fixColumn: boolean; + horizonScroll: boolean; // Body rowClassName: string | RowClassName; From 2d28f810b9c9d6168805c88f06186313bbf7c12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Dec 2022 11:44:50 +0800 Subject: [PATCH 6/6] chore: comment --- src/context/PerfContext.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/context/PerfContext.tsx b/src/context/PerfContext.tsx index dcc41f49f..bbe6cef59 100644 --- a/src/context/PerfContext.tsx +++ b/src/context/PerfContext.tsx @@ -4,6 +4,7 @@ export interface PerfRecord { renderWithProps: boolean; } +// TODO: Remove when use `responsiveImmutable` const PerfContext = React.createContext({ renderWithProps: false, });