React

Links

1. https://www.geeksforgeeks.org/react-js-uncontrolled-vs-controlled-inputs
2. https://www.freecodecamp.org/news/what-are-controlled-and-uncontrolled-components-in-react

Summary

[ myValue, setMyValue ] = useState();

A controlled input in React is an <input> element where the value property is tried to a value controlled by useState or useSelector. The eventHandler script on the <input> element is then used to call the setMyValue function returned by useState.

The advantage of using a controlled value, is the following:

1. The value is updated immediately creating a nice user experience.
2. The eventHandler script can be used to check the syntax of the value – for example – can make sure the value has a valid URL format.

Uncontrolled input elements do not set the value property in this way – and allow for a little more programmatic freedom for the developer.