[Bug] fail to render DOM correctly for component with key about preact HOT 17 CLOSED

There is another problem, but I am not sure about the cause and whether it is a bug

1. Render [VNode 1, VNode2]
2. Update props and render [VNode 1]
3. render of VNode2 will run

from preact.

@foray1010 I notice you're on 3.4.0 - is this happening on preact 3.4.0? There is a fix for keys in that release:

from preact.

Yes, I am in 3.4.0

from preact.

Regarding your second issue, that's just how react/preact works. If you are building components that are deterministic in their behaviour when re-rendered for the same props, I would suggest using a shouldComponentUpdate hook or @pure decorator:

class Foo extends Component {
  shouldComponentUpdate(props) {
    for (let i in props) if (props[i]!==this.props[i]) return true;
    return false;
  }
}

or the decorator approach:

// only re-render when props *change*:
@pure
class Foo extends Component {
  render() {  }
}


// here's an example implementation of that decorator:
function pure(ref) {
  ref.prototype.shouldComponentUpdate = function(props) {
    for (let i in props) if (props[i]!==this.props[i]) return true;
    return false;
  };
}

from preact.

I think my case is a bit different:
I have a state a which is an array [{text: '1'}, {text: '2'}]

inside component b, I render an array of component c depends on state a

const b = (props) => {
  // a is connected by redux
  let items = props.a.map((value, index) => (<c index={index} />))

  return <div>{items}</div>
}

const c = (props) => (
  <div>{props.a[props.index].text}</div>
)

So, after I set state.a to [{text: '1'}] only, the c that was related to value {text: '2'} will fail to render because props.a[props.index] is undefined

I thought when rerender, preact should know that in b, I don't have c with index 1 anymore, so why need to run render again?

from preact.

@foray1010 In your example, you're not passing the a prop to <C>.
Here is an example that seems to show what you describe, but it does not incorrectly re-render <C>:
https://jsfiddle.net/developit/va7benuj/

from preact.

@developit thanks for the example! I may not be so clear, I should said that a is connected to all components by redux

Maybe it only happen when use with redux, I will generate an example to u tmr

from preact.

Alright, let me know. It seems like the issue would be that the child component (C) is being re-rendered prior to the parent, so the parent has not yet removed it.

from preact.

I try to minimize the case, here it is: https://github.com/foray1010/test-preact , it seems only happen when use with redux

Main logic is in here: https://github.com/foray1010/test-preact/blob/master/js/containers/App.jsx

As I don't know how to use jsfiddle.net, please git clone it and

1. npm install
2. npm install -g gulp
3. gulp dev
4. run __dev/test.html

The error Uncaught TypeError: Cannot read property 'text' of undefined occur after you click 1 and 2

Update: if no key for Item, every time you click will have error

from preact.

Thanks for the awesome example, looking into this now.

from preact.

Fixed on master, releasing as 4.0 shortly.

from preact.

4.0 doesn't fix the example: https://github.com/foray1010/test-preact
I still get Uncaught TypeError: Cannot read property 'text' of undefined

from preact.

The issue is that you're mapping parent state to the same prop. Redux is triggering a re-render of your child component (<Item>), but only after the props have already triggered a re-render. A more typical approach to this would be to instead pass the item itself as a prop, rather than relying on <item> to obtain it from redux.

Can you try setting syncComponentUpdates=false? Or I can.

import { options } from 'preact';

options.syncComponentUpdates = false;

I'm curious if it would fix the issue.

from preact.

no it doesn't fix the issue

from preact.

The issue in comment #1 is fixed by updating preact-compat from 0.7.1 to 1.6.0

from preact.

Sweet! The other issue still happens though?

from preact.

yes, I hv just updated https://github.com/foray1010/test-preact
Issue still happen no matter options.syncComponentUpdates is true or false

from preact.