Notes on React and Forms

React Docs - Forms

• What is a ‘Controlled Component’?

A controlled component is an input form element controlled by React such that it both renders a form and controls what happens in the form after users provide input.

• Should we wait to store the users responses from the form into state when they submit the form OR should we update the state with their responses as soon as they enter them? Why.

With React state as the “source of truth” (as the article says), the state is updated in real time with every key stroke. While this provides a page that can be more responsive to the user, it seems like it would have the downside of needing to continuously rerender the page.

• How do we target what the user is entering if we have an event handler on an input field?

Using this.state.value for the value of the value attribute, allowing the user input to be accessible to the event handler.

The Conditional (Ternary) Operator Explained

• Why would we use a ternary operator?

It is an alternative to an if…else statement, but it can be done with short and simpler syntax yielding the same result.

• The provided statement rewritten using a ternary statement:

x===y ? console.log(true) : console.log(false)

Things I want to know more about

Does the real time keystroke responsive re-rendering of the form element lead to a slower process or take up a substanial amount server/browser resources?