Preact: Regression for keyed updates for preact 10?

Created on 9 Oct 2019  路  3Comments  路  Source: preactjs/preact

When I tried to update js-framework-benchmark for preact 10.0.0 I ran into a issue where a swap operation on the model didn't redraw correctly. It used to work for preact 8.4.2 and before.

Can you please take a look at the issue https://github.com/krausest/js-framework-benchmark/issues/536#issuecomment-538776010 and check whether it's acutally a bug? The referenced bug report contains links to the source code and instructions how to build the preact implementation only.

Most helpful comment

We should probably cut a new patch release soon.

All 3 comments

Hey,

EDIT: I just realized this was fixed here next release should have you covered

I just quickly tried to reproduce this in a test (excuse the verbose code)

    it.only('should allow for swapping keyed lists', () => {
        const data = [];
        let swap;
        for (let i = 1; i <= 10;i++) {
            data.push({
                id: i,
                label: 'hi' + i
            });
        }

        const Row = ({ data }) => <p>{data.label}</p>;

        class App extends Component {
            constructor(props) {
                super(props);
                this.state = { data };
                swap = this.swap = this.swap.bind(this);
            }

            swap() {
                const { data } = this.state;
                const a = data[0];
                data[0] = data[9];
                data[9] = a;
                this.setState({ data });
            }

            render() {
                return (
                    <div>
                        {this.state.data.map((data) => (
                            <Row data={data} key={data.id} />
                        ))}
                    </div>
                );
            }
        }

        const buildP = (p) => `<p>hi${p}</p>`;

        render(<App />, scratch);
        expect(scratch.innerHTML).to.equal(
            `<div>${buildP(1)}${buildP(2)}${buildP(3)}${buildP(4)}${buildP(5)}${buildP(6)}${buildP(7)}${buildP(8)}${buildP(9)}${buildP(10)}</div>`
        );

        console.log('swapping');
        swap();
        rerender();
        expect(scratch.innerHTML).to.equal(
            `<div>${buildP(10)}${buildP(2)}${buildP(3)}${buildP(4)}${buildP(5)}${buildP(6)}${buildP(7)}${buildP(8)}${buildP(9)}${buildP(1)}</div>`
        );
    });

This seems to work correctly

We should probably cut a new patch release soon.

Thanks - it works fine with 10.0.1!

Was this page helpful?
0 / 5 - 0 ratings