Published November 25th, 2018
Not only that, but React also stays as the most popular front-end framework year after year, and as of 2018,
With this popularity and adoption in all sort of companies, from start-ups to big tech companies, there are many opportunities to get a job if we master this framework.
In this post, I want to review some commonly asked interview questions for React and one of the most common libraries used in combination: Redux, a great implementation of the Flux architecture, which has a great value in enterprise applications where that handles a complex and high scale volume of state data. If we’d like to get a job in React, there’s also a good idea to learn Redux too.
Let’s begin with some React interview questions.
The virtual DOM is an in-memory representation of Real DOM. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render subcomponents that actually change.
Props get passed to the component similar to function parameters
state is managed within the component similar to variables declared within a function.
There are four different phases of React component's lifecycle:
Initialization: In this phase react component prepares setting up the initial state and default props.
Mounting: The react component is ready to mount in the browser DOM. This phase covers componentWillMount and componentDidMount lifecycle methods.
Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state. This phase covers shouldComponentUpdate, componentWillUpdate and componentDidUpdate lifecycle methods.
Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase include componentWillUnmount lifecycle method.
React creates a virtual DOM. When state changes in a component it firstly runs a "diffing" algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.
In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed to components automatically as a special prop:
There are some methods available in the React API to work with this prop. These include
State is similar to props, but it is private and fully controlled by the component. State is necessarily an object that holds data and determines how the component renders and behaves.
In HTML, form elements such as
<select> typically maintain their own state and update it based on user input. When a user submits a form, the values from the elements mentioned above are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in its state and will re-render the component each time the callback function, e.g., onChange is fired as the state will be updated. An input form element whose value is controlled by React in this way is called a "controlled component".
Flux is an application design paradigm used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook used this pattern internally when working with React The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:
The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners. The entire state is represented by a single store. Any action returns a new state via reducers. That makes Redux very simple and predictable.
In computer programming, a pure function is a function that has the following properties:
Its return value is the same for the same arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams from I/O devices).
Its evaluation has no side effects (no mutation of local static variables, non-local variables, mutable reference arguments or I/O streams). Thus a pure function is a computational analogue of a mathematical function.
One way to do it is by setting an exit flag in the root state reducer, so it is set to true it just let the state pass unmodified.
Thanks so much for reading and good luck in your next interview!.