stateOrderBug.js

import htm from 'htm';
import { h } from 'preact';
import { useState, useCallback } from 'preact/hooks';

const html = htm.bind(h);

// configuration used to show behavior vs. workaround
let childFirst = true;
const Config = () => html`<label>
	<input type="checkbox"
    checked=${childFirst}
    onchange=${evt => {
		childFirst = evt.target.checked;
	}}
  />
		Set child state before parent state.
	</label>`;

const Child = ({ items,setItems }) => {
	let [pendingId, setPendingId] = useState(null);
	if (!pendingId) {
		setPendingId(pendingId = Math.random().toFixed(20).slice(2));
	}

	const onInput = useCallback(evt => {
		let val = evt.target.value,
			_items = [...items, { _id: pendingId, val }];
		if (childFirst) {
			setPendingId(null);
			setItems(_items);
		}
		else {
			setItems(_items);
			setPendingId(null);
		}
	}, [childFirst, setPendingId, setItems, items, pendingId]);

	return html`<div class="item-editor">
    ${items.map((item,idx) => html`<input key=${item._id}
      value=${item.val}
      oninput=${evt => {
		let val = evt.target.value,
			_items = [...items];
		_items.splice(idx, 1, { ...item,val });
		setItems(_items);
	}}
    />`)}

    <input key=${pendingId}
      placeholder="type to add an item"
      oninput=${onInput}
    />
  </div>`;
};

const Parent = () => {
	let [items, setItems] = useState([]);
	return html`<div><${Config} /><${Child} items=${items} setItems=${setItems} /></div>`;
};

export default Parent;