the components do not re-render when the props 'value' changed .

Here is how I use :

The console log of defaultValue is right, but when it changes , the component does not re-render. the textarea stay the last value.

render() {
    const { defaultValue } = this.props
    console.log("defaultValue")
    console.log(defaultValue)
    return (
      <ReactSummernote
        value={defaultValue}
        options={{
          lang: 'zh-CN',
          height: 150,
          dialogsInBody: true,
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview']]
          ]
        }}
        onChange={this.onChange}
      />
    )
  }

[i-kitaev]

react-summernote 2.0.0 support controlled value and uncontrolled defaultValue.

[i-kitaev]

Hi @westpsk, the value is controlled inside the jQuery Summernote plugin, thus if the component will be re-rendered, the plugin may unbind.

So in order to avoid this, as @alameya mentioned, the shouldComponentUpdate method returns false, so the component will not be re-rendered and the plugin would not unbind. Otherwise the jQuery plugin should be initialized again with the new value in componentDidUpdate on every re-render, which is not that efficient.

TL DR: The solution to your problem is this:

There is an onChange prop, through this callback you receive every new Summernote’s value, which you store then. So the component should not be re-rendered and the value you have is always up-to-date.

If you want to have all the control over the value and the defaultValue prop in this component, you are always welcome to send PR.