How React.js Explicit Approach is Better Than Concise

In React.js you write explicit code. You spend a little more time explicitly wiring things up together. That helps them not fall apart, and it also helps people better understand what the code is doing.

How React.js Explicit Approach is Better Than Concise



Here’s the example.



Frameworks like Angular popularize two-way binding as a way to avoid typing by automatically keeping form inputs in sync with the underlying data. This approach was extremely popular until React came along. Below is the two-way binding.



It was popular because it requires less coding. With two-way binding, JavaScript values and inputs are automatically kept in sync.

In contrast, React embraces one-way binding instead. It requires a little more code. With React, you declare an explicit change handler and you reference it on your input.



This extra work has some benefits. You have more control because you can declare precisely what should happen to every event. This means you can transform and validate input before updating state and perform performance optimizations as desired.

Your code is more explicit since you clearly state what you want to happen when an event occurs, and this makes it easy to understand and debug when an error happens.

Although React helped repopularize doing one-way binding, other popular libraries like Angular have shifted gears and embraced it as well today for these reasons.

Now if your team strongly prefers two-way binding, you can use libraries that add it to React, but for the reasons we just mentioned, few do so, and we don’t recommend it.

Also, you don’t need to declare a separate change handler for each input. There are simple patterns for centralizing your change handlers in Reacts.

So in the real world, the amount of code that you write in React isn’t substantially larger because of one-way binding because you typically have a single change handler for an entire form.

In the end, React requires more typing to implement than traditional two-way binding approaches, but with the React benefit of easier maintenance, greater clarity, reliability, and performance.

Tutorial Funda

Tutorial Funda will keep you updated with the latest Programming Languages, Software Tools and related technologies used in Software Development.

Leave a Reply

Your email address will not be published. Required fields are marked *