Unidirectional and Bidirectional Data Flow - The Ultimate Front-End Interview Questions Guide Pt: 1
Tags: react, javascript, typescript
Published: 2022-05-30 12:36:18

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.

![two way data binding](https://i.stack.imgur.com/2wouW.jpg)

Let's look at an example VueJS code that explores this concept:

```js
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.

```vue
<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.

[See a live example on CodePen](https://codepen.io/vuejs-br/pen/JjXmvQg?html-preprocessor=slim)

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.

![unidirectional flow](https://www.exploringreact.com/wp-content/uploads/2020/11/unidirectional.png)

Let's see an example code in practice:

```jsx
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.

[See a live example on CodePen](https://codepen.io/Hafoux/pen/ZEOwzdQ)

### 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/