Component does not re-render when props are updated
amoenk opened this issue · comments
As a side effect of copying props to state, when new props are sent to the component, the components state is not also updated. Example resolution:
componentWillReceiveProps(nextProps) {
this.setState({tags: nextProps.tags.slice(0)});
}
I have been thinking about this for a while and I don't know what the right approach is, the tags prop was initially just meant for pre-loading tags.
The problem with setting the state every time the component receives props is that it can unintentionally erase tags if the tags array has not been kept up to date with the tags component through onChange or getTags.
I've been playing around with the idea of rewriting the component to be compatible with linkState which
would introduce this behavior.
Hmm.. there's still the dependency on state using LinkState. It might be better to eliminate tags from state entirely and only render the tags passed from the props. The parent component would then have to be responsible for ensuring that the TagsInput props are updated appropriately, but thats no different than any other input component.
Yes, that would be ideal but would break backwards compatibility, I'm thinking about adding this in version 1.0.
I counting on these changes too. Meanwhile I'm using a fork with the same approach described by @amoenk.
I have rewritten the component to more closely resemble the behavior of the normal react input elements. Now instead of having the tags as state it takes them as prop (as suggested by @amoenk). Does this solution work for you guys?
Just release it as 2.0 if you change the API.
You can have a defaultValue prop as well, similar to a text input box.
I agree with @JaRail, release as 2.0 to avoid BC breaks.
I just did a major version bump (going from 0.x.x to 1.x.x) with breaking changes to the API, do I need to do another one to 2.x.x to avoid backwards compatibility issues?
@JaRail good idea I will add better support for uncontrolled use of the component.
It's just a number. You don't need big new features to bump it. With NPM, the primary purpose is tracking breaking changes vs. safe patches.
I think once you release a version to the wild, its in the wild. No taking it back. I'd bump to 2.0 to avoid causing BC breaks and let your clients upgrade on their own time.
I will do a bump to 2.0 when I add better uncontrolled support for the component.
This issue is fixed in versions ^1.0.0 as the component is now controlled like other input elements. By changing tags to value it should re-render when props are updated.