Skip to content

Instantly share code, notes, and snippets.

@iamakulov
Created October 30, 2022 18:59
Show Gist options
  • Save iamakulov/6762c0e25368d57bb8b8bd334a14cd6d to your computer and use it in GitHub Desktop.
Save iamakulov/6762c0e25368d57bb8b8bd334a14cd6d to your computer and use it in GitHub Desktop.
diff --git a/community-modules/react/src/reactUi/rows/rowContainerComp.tsx b/community-modules/react/src/reactUi/rows/rowContainerComp.tsx
index e2010ee9dd..4112639dde 100644
--- a/community-modules/react/src/reactUi/rows/rowContainerComp.tsx
+++ b/community-modules/react/src/reactUi/rows/rowContainerComp.tsx
@@ -12,8 +12,9 @@ const RowContainerComp = (params: {name: RowContainerName}) => {
const [viewportHeight, setViewportHeight] = useState<string>('');
const [rowCtrlsOrdered, setRowCtrlsOrdered] = useState<RowCtrl[]>([]);
- const [rowCtrls, setRowCtrls] = useState<RowCtrl[]>([]);
- const [domOrder, setDomOrder] = useState<boolean>(false);
+ // These values don’t affect the component output, so we don’t need to keep them as state:
+ const rowCtrlsRef = useRef<RowCtrl[]>([]);
+ const domOrderRef = useRef<boolean>(false);
const [containerWidth, setContainerWidth] = useState<string>('');
const { name } = params;
@@ -41,7 +42,9 @@ const RowContainerComp = (params: {name: RowContainerName}) => {
// if domOrder=true, then we just copy rowCtrls into rowCtrlsOrdered observing order,
// however if false, then we need to keep the order as they are in the dom, otherwise rowAnimation breaks
- useEffect( () => {
+ function recalculateRowCtrlsOrdered() {
+ const domOrder = domOrderRef.current;
+ const rowCtrls = rowCtrlsRef.current;
setRowCtrlsOrdered( prev => {
if (domOrder) {
return rowCtrls;
@@ -53,15 +56,21 @@ const RowContainerComp = (params: {name: RowContainerName}) => {
const next = [...oldRows, ...newRows];
return next;
});
- }, [domOrder, rowCtrls]);
+ }
useEffectOnce(() => {
const beansToDestroy: any[] = [];
const compProxy: IRowContainerComp = {
setViewportHeight: setViewportHeight,
- setRowCtrls: rowCtrls => setRowCtrls(rowCtrls),
- setDomOrder: domOrder => setDomOrder(domOrder),
+ setRowCtrls: (rowCtrls) => {
+ rowCtrlsRef.current = rowCtrls;
+ recalculateRowCtrlsOrdered();
+ },
+ setDomOrder: (domOrder) => {
+ domOrderRef.current = domOrder;
+ recalculateRowCtrlsOrdered();
+ },
setContainerWidth: width => setContainerWidth(width)
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment