Repository navigation
Regression in 1.3.2: splitter snaps back to initial size on child change #11
Description
Activity
Thank you for bringing up this issue. You might be indeed correct that it's caused by that
useEffecthook. This feels important, so I'll try to make time for this and look into it.The reason that that hook gets triggered every time Splitter's children change is so Splitter can support dynamically added or removed children. That's useful for conditional rendering, for example
<Splitter> {ifTimeHasPassed ? ( <div>child 1</div> <div>child 2</div> ) : <div> child 1</div> } <Splitter/>
Splitter has to know when its children change to recalculate the "splits" and re-render.
To prevent this behavior right now you could do two things.
- Prevent the component that contains Splitter to re-render. That usually means moving state down or/and memoization.
- Set the
initialSizesprop and theonResizeFinishedprop so on the next re-rerender, Splitter's children will have sizes that they had on the last finished resize action.
const [initialSizes, setInitialSizes] = useState([50, 50]) const handleResizeFinished = useCallback((_, newSizes) => { setInitialSizes(newSizes) }) <Splitter initialSizes={initialSizes} onResizeFinished={handleResizeFinished} > <div>Tile 1</div> <div>Tile 2</div> </Splitter>
Thank you @mlejva.
I had implemented a workaround by wrapping thedevboookhq/splitterin my own splitter component which captures size changes and stores them in a state which is then pushed todevboookhq/splitterthroughinitialSizes(essentially implementing your second suggestion above, but pushing the size state management into the splitter component).May I suggest that this kind of persistent size state management is implemented directly in
devboookhq/splitter?Reacted by Vasek MlejnskyThis might solve the issue. Can you share some code please? Or go ahead and open a PR if you feel like it!
import DevbookSplit, { SplitDirection as DevbookSplitDirection, GutterTheme as DevbookGutterTheme, } from "@devbookhq/splitter"; import { FunctionComponent, useState, useCallback } from "react"; interface SplitterProps { direction?: keyof typeof DevbookSplitDirection; minWidths?: number[]; minHeights?: number[]; initialSizes?: number[]; gutterTheme?: keyof typeof DevbookGutterTheme; gutterClassName?: string; draggerClassName?: string; onResizeStarted?: (pairIdx: number) => void; onResizeFinished?: (pairIdx: number, newSizes: number[]) => void; classes?: string[]; } export const SplitDirection = DevbookSplitDirection; export const GutterTheme = DevbookGutterTheme; export const Splitter: FunctionComponent<SplitterProps> = ({ direction = "Horizontal", gutterTheme = "Light", children, initialSizes, ...props }) => { // Capture the splitter sizes and store them in a state to avoid https://github.com/DevbookHQ/splitter/issues/11 const [persistentSizes, setPersistentSizes] = useState<number[] | undefined>( initialSizes ); const handleResizeFinished = useCallback((_, newSizes) => { setPersistentSizes(newSizes); }, []); return ( <DevbookSplit direction={DevbookSplitDirection[direction]} gutterTheme={DevbookGutterTheme[gutterTheme]} onResizeFinished={handleResizeFinished} initialSizes={persistentSizes} {...props} > {children} </DevbookSplit> ); };
Reacted by Vasek Mlejnsky, Ken Qian, Brian Ward and andrec93pThank you. I'll try to implement this into the next release.
Reacted by Vassil Kovatchev and skstef
Consider the following example:
Background
A component which renders a splitter with two children.
The component has a state - a counter.
When the user clicks the first child of the splitter, the counter is incremented.
The second child of the splitter renders the counter.
Reproduction steps
Observed behavior with splitter 1.3.2
The splitter snaps back to its initial location and the counter rendered in the second child goes up.
Observed behavior with 1.2.4
The splitter maintains its current position and the counter rendered in the second child goes up.
I believe the issue is caused by this:
https://github.com/DevbookHQ/splitter/blob/master/src/index.tsx#L358
The useEffect hook is called whenever the children of the splitter change, which leads to the splitter snapping back to its initial location.