title: Custom widget with input loses focus in react-jsonschema-form when formData is passed as a prop to the form
body: <p>I have a form made using react-jsonschema-form and I maintain a state for formData and pass it as a prop to the form along with an onChange event. I need to maintain this formData state and pass as prop because I have other states as well which when setState re-render the form and the form fields reset. I have a custom widget with an input box in this form. Below is my sample code.
  Problem - For every character I type in the input box, the custom widget gets re-rendered and the input box loses focus.<br>
  <a href="https://jsfiddle.net/niteenautade/fce9x2ny/" rel="nofollow noreferrer">https://jsfiddle.net/niteenautade/fce9x2ny/</a></p>
  
  <pre><code>import React, { Component } from 'react';
  import Form from "react-jsonschema-form";
  
  class App extends Component {
    constructor(props){
      super(props)
      this.state = {
        formData : {}
      }
      this.getSchema = this.getSchema.bind(this)
      this.getUiSchema = this.getUiSchema.bind(this)
    }
    render() {
      var schema = this.getSchema()
      var uiSchema = this.getUiSchema()
  
      return (
        &lt;div className="App"&gt;
          &lt;div&gt;
            &lt;Form schema={schema}
            uiSchema={uiSchema}
            onChange={(e)=&gt;{this.setState({formData:e.formData})}}
            formData={this.state.formData}
            onSubmit={(data)=&gt;{ console.log(data)  }}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
    getSchema = () =&gt; {
      const schema = {
        title: "Test Form",
        type: "object",
        properties: {
          firstname: {
            type: "string",
            title: "firstname"
          },
        }
      };
      return schema
    }
    getUiSchema = () =&gt; {
      const uiSchema = {
        firstname : {
          "ui:widget": (props) =&gt; {
            return (
              &lt;div&gt;
                &lt;input type="text"
                  value={props.value}
                  required={props.required}
                  onChange={(event) =&gt; props.onChange(event.target.value)} /&gt;
              &lt;/div&gt;
            );
        }
        }
      };
      return uiSchema
    }
  }
  
  export default App;
  </code></pre>