title: Should I keep a state only in parent component or should I share it between parent and child components? React.js
body: <p>Let's assume I have a parent <code>App</code> component, which keeps user settings saved in it's state and synced throughout my app, by being passed down as a <code>Settings</code> object to all of it's children.</p>
  
  <p>And for sake of the argument, Let's assume <code>App</code> has two other child components, one called <code>Settings</code> component, which holds a form, where the user inputs his/her settings and clicks submit to submit it's settings.</p>
  
  <p>And another <code>Foo</code> component which projects/shows/hides various elements or other components based on the settings the user selected for the app in the earlier form.</p>
  
  <p>Those two components won't render together, only once the user submits the form the <code>Foo</code> component is displayed.</p>
  
  <p>Now I find myself tangled between two approaches: one, is to keep all settings also in a state saved inside my <code>Settings</code> component, and each time an input changes, update only the <code>Settings</code>'s component state accordingly, by having an handler for each input, and pass all those settings to the <code>App</code> component via a callback (which will update <code>App</code>'s state) only once the user submits the form. </p>
  
  <p>Or, make <code>Settings</code> a stateless component, and pass all input handlers as callbacks (or as one unified callback) to the <code>App</code> component, which will then update the state on every input change.</p>
  
  <p>As an old-school web developer, I prefer the first approach as it updated the <code>App</code> component only once, and so it re-renders all of it child components also only once, and yet my <code>Settings</code> component remains independent to the <code>App</code> component, and their only interface is the <code>OnSubmit</code> callback which passes the whole settings object once.</p>
  
  <p>The second approach, on the other hand, separates all logic and handling from the <code>Settings</code> component, removes redundant states, and leaves it as a plain and simple UI "view" component if you will. And looks like the common design pattern used in many React apps I've seen.</p>
  
  <p>Which approach is better and why? Is there anything else I'm missing out? How would you go by handling this? What is the best practice for parent-child interactions in React? How much would you want your child component to be encapsulated and independent from it's environment? And how many callbacks would you want to pass along from parent to child? </p>
  
  <p>I would also really appreciate some good references and reading materials..</p>
  
  <p>Thanks.            </p>