Complete Guide to Working With Forms In Reactjs

Creating a Task Form

Let’s add an uncontrolled component this time: a text field to include new tasks.

classCheckListextendsComponent {
render(){
lettasks =this.props.tasks.map((task) => (...);
return (
<divclassName="checklist">
<ul>{tasks}</ul>
<inputtype="text"
className="checklist--add-task"
placeholder="Type then hit Enter to add a task" />
</div>
)
}
}

Since you didn’t specify a value prop, the user can freely write inside the text field. In the next chapter, you will wire the form fields in the checklist to add and mark tasks as done.

To finish, let’s add some CSS to style the form element:

.checklist--add-task {
border: 1px dashed #bbb;
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 3px;
}

Virtual DOM Under the Hood

As you’ve seen so far, one of React’s key design decisions is to make the API seem like it re-renders the whole app on every update. DOM manipulation is a slow task for a variety of reasons, so in order to make this possible in a performant way, React implements a virtual DOM. Instead of updating the actual DOM every time the application state changes, React simply creates virtual tree that looks like the DOM state that you want. Then it figures out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

This process of finding the minimum number of changes that must be made in order to make the virtual DOM tree and the actual DOM tree identical is called reconciliation, and in general it is a very complex and extremely expensive operation. Even after many iterations and optimizations, this remains a very difficult and time-consuming problem. To make this tractable, React makes a few assumptions about how typical applications work that allow for a much faster algorithm in practical use cases. Some assumptions include:

  • When comparing nodes in the DOM tree, if the nodes are of different types (say, changing a div to a span), React is going to treat them as two different sub-trees, throw away the first one, and build/insert the second one.

    The same logic is used for custom components. If they are not of the same type, React is not going to even try to match what they render. It is just going to remove the first one from the DOM and insert the second one.

  • If the nodes are of the same type, there are two possible ways React will handle this:
    • If it’s a DOM element (such as changing <div id=”before” /> to <div id=”after” />), React will only change attributes and styles (without replacing the element tree).
    • If it’s a custom component (such as changing <Contact details={false} /> to <Contact details={true} />), React will not replace the component. Instead, it will send the new properties to the current mounted component. This will end up triggering a new render() on the component, and the process will reinitiate with the new result.

Keys

Although React’s Virtual DOM and differing algorithms are very smart, in order to be fast, React makes some assumptions and takes a naive approach in some cases. Lists of repeating items are especially tricky to handle. To understand why, let’s start with an example . represent a previous and current render.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares