Welcome to the Ultimate Front-End Interview Guide. In this series of posts you will find the most demanded topics in Front-End interviews for you to do well in all of them. Even if you are not preparing for an interview right now, this series of posts will keep you up to date and always prepared to explain complex topics related to the most derivative technologies of interface construction.
Unidirectional what?
The concepts of unidirectional and bidirectional data flow are somewhat easy to explain, but at the same time a bit tricky if you don't have the right words or a contrary use case to exemplify.
A front end data flow is a set of data that transits between two or more parts of a project when rendering a page. This data can be represented in several ways, but today it has been commonly used and known as state. Changing a state and the actions that the framework you use takes to change the state is how we define the data flow.
The most famous library for front-end development, ReactJS uses unidirectional data flow, and libraries like VueJS use bidirectional data flow. Let us now learn the difference between them.
Bidirectional Data Flow on VueJS and Angular
Frameworks like VueJS and Angular use two-way data binding,
Two-way data binding refers to sharing data between a component class and its template. If you change data in one place, it will automatically reflect at the other end.
This is a concept that exists natively in functions in Javascript through the .bind() method and that was implemented in these tools to control the flow of state bidirectionally.
Let's look at an example VueJS code that explores this concept:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
This is data in Vue that will change when typing in an input. To use two-way data binding in vue, we use the v-model attribute.
<div id='app'>
<p>{{ message }}</p>
<input v-model='message'>
</div>
In this case, the input will start with the default value 'Hello Vue.js'. When we change the value of the input field, we automatically trigger a change in the view, which will automatically trigger a change in the data. Likewise, if we change the default value of the data or modify it in the application, it will be reflected in the view due to the concept of two way data binding.
In a practical and summarized way, in these frameworks, when the state changes, the view changes, rendering again to apply the changes. Likewise, when the view receives a change, the state is forced to update and keep in sync with what is displayed on the screen.
Unidirectional Data Flow on React
In the React library we have the concept of Unidirectional Data Flow, that is, the data only transits between one of the parts to the other and not the reverse. In the case of React, the only way to change what we see on screen is through modifying the data (state). When modifying the view, the state does not change, unlike in Vue or Angular.
Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application.
Let's see an example code in practice:
const { useState } = React
const App = () => {
const [input, setValue] = useState("");
const [name, setName] = useState('Chris');
handleInput = (event) => {
setValue(event.target.value);
}
updateName = (event) => {
event.preventDefault();
setName(input);
setValue("");
}
return (
<div className="box">
<h1>
Hello, <span>{name}!</span>
</h1>
<form className="form">
<div class="field">
<label for="name-1">Update Name</label>
<div class="control">
<input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
</div>
</div>
<div class="field">
<div class="control">
<button onClick={updateName} class="button is-dark">Save</button>
</div>
</div>
</form>
</div>
)
}
Let's look at the form above. The input is responsible for updating the name described in the h1 tag. Note that the only way we have to add the state is when we iterate with the button, which makes a call to the useState() hook. Even if we changed the value of the input or used the state as the value for it, it would have no effect without calling the function which changes the state. This represents that the flow is always unidirectional, the view cannot change the state and vice versa, everything goes a single flow.
Conclusion
Today we know two concepts that are somewhat complex, but that will become internalized as we practice and review the concepts. If you have any questions, send them here in the comments and I will be happy to answer.
This post is part of a series of posts, stay tuned and follow me here on dev.to for more posts on the Ultimate Front-end Interview guide.
Follow me on linkedin:
https://www.linkedin.com/in/aryclenio/
Top comments (1)
Thanks for the explanation and examples! Did you mean to write "when we interact with the button" instead of "when we iterate with the button"?
"Note that the only way we have to add the state is when we iterate with the button, which makes a call to the useState() hook. "