Fix Static rendering stale items on unmount (#361)

.github/workflows/test.yml

@@ -19,3 +19,4 @@ jobs:
       - run: npm test -- --serial
         env:
           FORCE_COLOR: true
+          CI: false

src/components/Static.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo, useState, useEffect} from 'react';
+import React, {useMemo, useState, useLayoutEffect} from 'react';
 import type {ReactNode} from 'react';
 import type {Styles} from '../styles';
 
@@ -41,7 +41,7 @@ const Static = <T,>(props: Props<T>) => {
 		return items.slice(index);
 	}, [items, index]);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		setIndex(items.length);
 	}, [items.length]);
 

test/components.tsx

@@ -360,6 +360,28 @@ test('skip previous output when rendering new static output', t => {
 	t.is(stdout.write.lastCall.args[0], 'A\nB\n');
 });
 
+test('render only new items in static output on final render', t => {
+	const stdout = createStdout();
+
+	const Dynamic: FC<{items: string[]}> = ({items}) => (
+		<Static items={items}>{item => <Text key={item}>{item}</Text>}</Static>
+	);
+
+	const {rerender, unmount} = render(<Dynamic items={[]} />, {
+		stdout,
+		debug: true
+	});
+
+	t.is(stdout.write.lastCall.args[0], '');
+
+	rerender(<Dynamic items={['A']} />);
+	t.is(stdout.write.lastCall.args[0], 'A\n');
+
+	rerender(<Dynamic items={['A', 'B']} />);
+	unmount();
+	t.is(stdout.write.lastCall.args[0], 'A\nB\n');
+});
+
 // See https://github.com/chalk/wrap-ansi/issues/27
 test('ensure wrap-ansi doesn’t trim leading whitespace', t => {
 	const output = renderToString(<Text color="red">{' ERROR '}</Text>);