React Concepts To Know For An Interview
This is essentially everything I forgot to review before my first technical interview. I had dedicated so much time to code challenges and algorithms and data structures that I had forgotten to review basic React concepts. So writing this post is as much for me as it is for anyone reading it, because I refuse to awkwardly stare at my interviewer is silence again.
What are Higher Order Components?
According to the React Docs, “ a higher-order component is a function that takes a component and returns a new component”. But what does this exactly mean for implementation? Well let’s say you have two components that render conditionally based on toggled state. You can create a higher order component to manage the toggled state in a container component and then pass that state to the components that will use it.
Below is an example of a higher order Toggler component. The withToggler() function takes in a component as its first argument and then passes that component to the Toggler component. The Toggler component then renders that component while passing down the toggled state and toggle state function.
The example below is one of the components being rendered by the HOC above. Here the Menu component renders a button and navigation menu depending on the “on” state being passed down by the Toggler component. At the bottom you can see we are passing this component, as well as our starting state value, into the withToggler() function before its exported.
How do they differ from regular React components? Regular components render props into UI elements while HOCs renders a component into another component.
What is React’s Virtual DOM?
The virtual DOM is a virtual representation of the actual DOM — think blueprint — and its what makes React so fast. This is because every time the state of the application changes, the virtual DOM is updated instead of the real DOM. When a state change occurs, a new virtual DOM tree is created and then compared or “diffed”, to the previous virtual DOM tree. This allows the virtual DOM to determine the best possible method of updating the real DOM with the minimum operations.
Once React knows which virtual DOM objects have changed, ONLY those objects are updated on the real DOM. This is why React’s performance is far better compared to manipulating the real DOM directly.
React Component Life Cycle
Class Components go through three Life Cycle stages: Mounting, Updating, and Unmounting.
Mounting is when a component is being created and inserted into the DOM. In this initialization phase, the constructor sets state and props. Then our componentDidMount() functions can run. This is where we can make our fetch requests and other asynchronous functions.
Updating is when a component is being re-rendered due to a change in state or props. During this phase, the shouldComponentUpdate(), render(), and componentDidUpdate() functions run. Each time React is updating the DOM
Unmounting is when the component is being removed from the DOM. This is when the function, componentWillUnmount(), is available for any “clean-up” that needs to be done.
Functional Components make use of the useEffect hook to achieve similar results to the class component life cycle methods mentioned above. The useEffect dependency array allows us to control running the function only once when the component first mounts (empty dependency array) or running the function every time an update is made to whatever we place in the dependency array. Then, when the component is unmounting we can make use of the callback function the useEffect hook provides to do any cleaning up.
