Synchronization of props with state is an anti-pattern

[furqanZafar]

http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

A component should not sync its state with its props, the 2 must be separate, like in any form input element in React, i.e an input element created using: <input value={apple} type={text}/> will always have the value 'apple' no matter what the user does.

The only way to change the value of the input component is by updating its props. <input value={this.state.x} type={text} onChange={this.handleChange} />

However this is not true in the case of react-select, as it syncs its state with props and the state can also be changed by user-input (multiple sources of truth).

The render method must use values from props instead of state. State maybe used to support access to value in the handleChange event, analogous to (this.refs.myInputElement.getDOMNode().value)

[dcousens]

@furqanZafar but you also have the case where if you omit a value="apple", the value is not nothing, but still changeable by a user, and onChange events are still fired.

Its more like, the prop is the optional source, but if it is omitted, the component assumes manages it instead.

At least, that is my understanding of how it should be. I'm still investigating whether this is actually the case.

[jamesjjk]

@dcousens @furqanZafar I believe this is still an issue - renders it difficult to use this component.. When utilising setState on any event it would trigger a render of the component..

[furqanZafar]

I ended up writing a whole new component that is completely stateless and avoids synchronisation of props with state.

It uses state for a particular value only if the user does not provide that value via props, otherwise it uses the value directly from props. This overcomes the problem stated by @dcousens, And makes it easier to maintain & add features.

https://github.com/furqanZafar/react-selectize

[jamesjjk]

@furqanZafar Thanks for sharing that, really nice piece of work - should put it out there, its very well written and overcomes the problems and anti-pattern used with react-select.

[dcousens]

Really nice component @furqanZafar
I've not seen Livescript before either :)

[furqanZafar]

Thanks!

Livescript has really helped speed up development time & improve code readability, one of the objectives of react-selectize is to raise awareness about how well Livescript gels with ReactJS due there functional nature.

Livescript is pretty, concise with rich syntax sugar, some of which just recently started appearing in ES6 such as destructuring (or pattern matching), enhanced object literals, template strings, classes & much more...

[gwyneplaine]

this is resolved in v2, we now maintain a separate stream for controlled props and internally managed state values. Please see the following docs for details.