Are you going to be interviewed for ReactJS in the near future?

Here are all the concepts you must be familiar with to increase your chances of getting hired.

Introduction

Pareto suggests that 80% of the outcomes result from 20% of the causes. Using this principle I've found that the most asked questions in the interviews come from the following concepts, which is why I recommend you understand these topics really well.

States & Props

States

In a React application, state enables us to manage the changing data.

In a Class-based react component, it is an object where key-value pairs indicating different data we wish to track in the application are included.

With the introduction of hooks, we can use states in a functional component using the useState hook. Further explained in the Hooks section👇.

Props

Props are short for properties. With props, we can pass data from one component to another uni-directionally.

It is a read-only data and only flows in a single direction (i.e. Parent component --> Child component). So if you want to access the state from a child component then you should promote the state to its parent component (where you want to access or modify that data).

On the contrary, if you want to modify a state in the parent component, you can pass its setter function as a prop to the child component.

Component Lifecycle and various lifecycle methods

Every react component goes through various phases in its lifecycle. The 3 main phases include:

• Mounting phase
• Updating phase
• Unmounting phase

Mounting

This is the phase when a component is mounted/placed into the DOM (Document Object Model)

This phase consists of various methods like:

• constructor() - called when a component is initialized
• getDerivedStateFromProps() - sets the initial state based on the props received by the component. It's called right before rendering the component.
• render() - This is a mandatory method and is responsible for outputting the HTML to the DOM
• componentDidMount() - called just after the component is rendered in the DOM

Updating

We are moving on to the next phase of the lifecycle, which includes updating a component.

This phase consists of various methods like:

• getDerivedStateFromProps() - this method is also called in the update phase
• shouldComponentUpdate() - returns a boolean denoting whether the component should continue to update or not. By default, it returns true
• render() - is called in order to re-render the component with new changes into the DOM
• getSnapshotBeforeUpdate() - gives a copy of the states and props before the component updated
• componentDidUpdate() - the component is updated before using this function.

Unmounting

This is the phase when a component is mounted/placed into the DOM (Document Object Model)

This phase consists of only one method:

• componentWillUnmount() - this method is called when the component is about to be destroyed and removed from the DOM

Here is a cheat sheet on all the lifecycle methods in React

Another cheat sheet of all the lifecycle methods can be found here.

Hooks

Before hooks were introduced in React v16.8, functional components were just used as pure components, i.e. they did not have the capabilities of a class component like storing states and passing props.

With the introduction of hooks, we can use all the features of a class component in a functional component.

useState

Using the useState Hook, you can create and track state variables in functional components. The useState hook takes in an initial state and returns two values:

• Current value of the state
• A setter function that updates the state's current value to a new one

Other than that, it works exactly like how states work in a class-based component.

useEffect

You can perform side effects in your functional components by using the useEffect Hook. useEffect takes in two arguments:

• A Callback Function
• Dependencies (Optional)

Few points to keep in mind about useEffect:

• To run the callback in every render you don't pass any dependencies as an argument
• To run the hook only once, pass an empty array as the second argument
• To run it whenever a state changes, pass an array as the second argument with that state as an array element

useRef

useRef is a hook that enables the functional components to directly create a reference to DOM elements. Using the useRef Hook, you can also preserve values between renders.

To learn more about useRef check out the official documentation.

Higher-order components

Advanced logic reuse in React components is accomplished with higher-order components. It is a pattern inspired by higher-order functions in Javascript. (Passing a callback to a function as an argument or returning a callback makes that function a higher-order function in javascript)

In react, higher-order components are those components that take in a component as an argument and return a new component.

Learn more about Higher-order components from this great blog.

Unique features in ReactJS

Virtual DOM

DOM(Document Object Model) is a structured representation of the HTML elements in the form of a tree data structure.

We can make changes to the UI by making changes in the DOM.

But it also has some drawbacks:

• DOM manipulation is expensive
• It is really slow
• It has limits to how many changes can be made at a time

All of these limitations are overcome by a concept that is introduced in React which is Virtual DOM.

Behind the scenes, React creates a copy of the Real DOM and any changes that occur in the states and props are reflected in this Virtual DOM. Making changes in Virtual DOM is comparatively very inexpensive which gives a lot of boost to the performance of the application.

JSX

JSX stands for Javascript XML and it allows us to write HTML-like syntax in Javascript files.

It is a markup language that is both easy to understand and flexible in the sense that it is both human-readable and machine-readable.

Each tag that is written in JSX is converted into React elements automatically.

Without JSX we would need to create each element separately using createElement() and add it to the DOM using appendChild() methods.

Conclusion

And there you have it! These are the most important ReactJS concepts that are asked in web development interviews.

Hopefully, you've managed to grasp all these concepts with my blog.

Now that you are familiar with these topics you will be able to answer most of the questions asked in interviews.

But it's essential to keep learning and growing your understanding in order to really become an expert in Frontend development.

As a next step in acing the Frontend interview, you can build various projects that could really enhance your portfolio and follow me on Twitter to get daily tips related to Web development.