Regression in 1.3.2: splitter snaps back to initial size on child change

Consider the following example:

import Splitter from "@devbookhq/splitter";
import { useState, useCallback } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <Splitter>
      <div onClick={handleClick}>Click me</div>
      <div>{count}</div>
    </Splitter>
  );
}

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

• After the component is rendered, grab the splitter and move it to a new location
• Click on the “Click me” child of the splitter

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.

[vassilvk]

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>
  );
};

[mlejva]

Thank you. I’ll try to implement this into the next release.