Last week I posted a blog about my experience doing a mock technical interview with SKILLED. A large portion of it was testing my knowledge of React by asking me questions about some of the theories behind it. This week I wanted to follow up with the answers I gave to my interviewer including any additional comments they made, both as a reference for myself to prepare for future interviews and to help any of those preparing for React-based interviews either with SKILLED or during their job search.
What is the virtual DOM?
The virtual DOM (Document Object Model) is a programming concept where an ideal or ‘virtual’ representation of the user interface is kept in memory and is synced with the ‘real’ DOM by a library such as ReactDom in a process called reconciliation. This is what enables developers to tell React what state you want the UI to be and React takes care of making sure the DOM matches that state. We don’t have to worry about manually updating the DOM ourselves.
What is the component lifecycle?
When an instance of a component is being created and inserted into the Dom the constructor() is run first to set an initial state, then render() which typically returns JSX to display the content to the DOM, followed by componentDidMount() which is used to make asynchronous calls or start subscriptions. When a component is being removed from the DOM, componentWillUnmount() is run which can be used to clean up running background functions such as subscriptions.
What are the main differences between a class and functional component?
A functional component is a plain JavaScript function that accepts props as an argument and returns a React element. Often considered Stateless components as they typically accept data and display it is responsible for rendering UI. Unless you start using hooks, in which case you can access state. It also does not have access to the lifecycle methods mentioned above. Again hooks such as useEffect can be used in place of these lifecycle methods.
A class component requires you to extend from React.Component and the render() method must be used to return HTML as JSX. They are typically known as Stateful components responsible for implementing logic and state and you can use the lifecycle methods in class components.
What is the difference between props and state?
Props (short for properties) are a way of passing data from parent to child components. When received from above they are immutable as far as the Component receiving them is concerned, they cannot be changed. While a Component cannot change its props, it is responsible for putting together the props for its child Components.
State is reserved only for interactivity, or data that changes over time. A Component manages its own state internally, it starts with a default value when a Component mounts and will undergo mutations in time usually generated from user events.
What are keys in React?
A key is a special string attribute you need to include when generating a list of elements in React, for example, if you are mapping through data and displaying each individual piece. Keys help React identify which items have changed, are added, or removed. For this reason, keys need to be unique and stable (you should not use the index of an array for its key). Most often an id is used. Indexes are not recommended because the order of items may change which can negatively impact performance.
What is JSX?
Short for JavaScript XML (Extensible Markup Language), it is a syntax extension to JavaScript and it is recommended in React to describe what the UI should look like. JSX produces React ‘elements’ that are rendered to the DOM. It helps as a visual aid when working with UI in JavaScript code since it so closely resembles HTML. JSX converts HTML tags into React elements that are placed on the DOM without having to worry about createElement() or appendChild() methods.
What is a fragment?
In React it is a common pattern for a component to return multiple elements, but a component can only return one element. Instead of wrapping multiple elements in an unneeded div, fragments let you group a list of children without adding those extra nodes to the DOM. The shorter syntax which looks like empty tags can be used in the way you would any other element but it doesn’t support keys or attributes.
What is the CSS box model?
All HTML elements can be considered as boxes, and the box model refers to design and layout. It is a box that wraps around every HTML element that consists of the actual content, padding, border, and margin.
Content: the content of the box, where text and images appear
Padding: the transparent area around the content
Border: the line that goes around the padding and content
Margin: the transparent area outside the border
All this allows us to add a border around elements and define space between elements. The box model is important to understand because when setting the width and height of an element, you set the size of the content area. To calculate the full size of the element you also need to add the padding, borders, and margins.
A neat trick though is to set the box-sizing CSS property to border-box which tells the browser to account for any border and padding in the values that you specify for an element’s width and height. This means the content box will shrink to accommodate the extra width or height that comes from the padding or the border.
h1 {
Box-sizing: border-box
}
How are arrow functions different from regular functions?
In classic function expressions, the ‘this’ keyword is bound to different values based on the context in which it is called. Arrow functions do not create their own scope and so they use ‘this’ from the code that contains the arrow function. Arrow functions eliminate the need to .bind(this) to pass the ‘this’ context into the function. ES6 arrow functions can’t be bound to a ‘this’ keyword so it lexically goes up a scope and uses the value of this in the scope in which it was defined. In the context of React it allows us to access this.state or this.props in functions without the binding of ‘this’.
What is a state management tool you can use and why might you use it?
I have used Redux as a state management tool and it is great for keeping the state of your app in one location. This becomes most beneficial when Components start having to send props down to grandchildren or great-grandchildren, or when multiple components not directly connected together are needing to access the same pieces of state. By using a tool such as Redux you can avoid this prop drilling and give components directly the pieces of the state they need. Another tool you can use is the React Context API which helps solve the same problems as Redux but is more lightweight.
Friends, please note that when I said these answers out loud to my interviewer, they weren’t nearly as polished as what I’ve written here. But I wanted to give you (and my future self) the best vocabulary to use when preparing to discuss React!
For more in-depth study, here are some great resources (I’m a big fan of the official React Docs):
Virtual Dom
Component Lifecycle
Class vs Functional Components
Props vs State
Keys in React
JSX
React Fragments
CSS Box Model
CSS box-sizing
Arrow vs Regular Functions
Redux
React Context API
Happy coding everyone and good luck studying!
Top comments (0)