React Technical Interview
Technical interviews can be very intimidating to say the least. So I was very fortunate that my first one was a mock interview that Flatiron provides for its graduates. My technical interview covered React.js and it was conducted on an online platform which allowed my interviewer and me to write and run code as well as see and talk to each other.
What is React? I’ll answer this and touch on several other topics covered in my interview.
REACT
React.js is a JavaScript front end library used to build high performing web applications utilizing a single html page through which browser views are changed without reloading the web page. Don’t confuse it with React Native which is a framework used to build mobile applications.
Significance: React is a single page application (SPA) that utilizes a virtual DOM (Document Object Model) to produce a complex User Interface (UI) and enhanced application performance .
FRAGMENTS
Components must wrap returned elements in a single tag. Fragments allow this to be done without adding extra nodes to the DOM. Fragments can be declared with explicit syntax ( <React.Fragment></React.Fragment> ) or with a short syntax ( < > < / > ).
However, you can’t use the key attribute with this short syntax. So if you’re going to create a list of elements, use the explicit syntax so you can use the key attribute to assign unique identities to each element.
Significance: Fragments enable the addition of child elements without warping the DOM or causing errors.
COMPONENT
Components are independent reusable bits of code used to build complex UIs. React renders components independently of other components. Two types of components are class and function.
Significance: You can quickly build complex interactive UIs with components. React apps are easier to debug because you’re working with small chunks of code that reside in separate components having specific concerns.
CLASS -vs- FUNCTIONAL Component
Class components extends or accesses React’s Component class. They can hold state and use lifecycle methods. Functional components are basically JavaScript functions. They’re usually arrow functions but they can also be created as regular functions. The render method is not used in functional components.
Significance: Class components are used when you need state. Lifecycle methods cannot be used in functional components because they need state.
NOTE Due to hooks, functional components can have state. So moving forward, React class component usage will fade out.
LIFECYCLE METHODS
Lifecycle methods are functions that can be used at specific phases in a component’s “life.” These methods are called at different times in a component’s lifecycle and include:
- componentWillMount (Pre-mounting): constructor function called & sets initial state
- componentDidMount (Mounting): component mounted onto the DOM
- componentDidUpdate (Updating): DOM manipulations after component has been created
- componentWillUnmount (Unmounting or Deletion): Just before component is deleted
Significance: Lifecycle methods enable code to run at a specific moment in a component’s life enabling finer control of app performance and preventative or protective actions in an app.
PROPS -vs- STATE
Props is data passed from parent component to child component. State is data mutated in a component. A component cannot change its props but it can change its state. State is mutable (changeable based on user actions) while props are not.
Significance: State handles fetching remote data, changing data when a user clicks a button, and changing data based on time passing. Props are properties that control how a React component will be expressed.
VIRTUAL DOM
The virtual DOM is only a copy of the rendered component elements. It is a representational tree of what a webpage looks like. The React render function creates a node tree of the React components’ rendered elements and makes updates based on user or system actions. The virtual DOM is responsible for updating the actual DOM to reflect what the UI looks like (what the user sees on their browser screen).
Significance: The virtual DOM is only a copy so it can be used to make a comparison of how the current webpage copy looks to the user or system changed copy of a webpage. Then update the actual DOM with only the relevant changed data and the current look of the webpage can reflect the changes made by the user or system.
There were more topics covered in addition to the ones above and all of this only covers the Q&A portion of the technical interview. Practice coding to ensure you pass the coding challenge as well. Good luck!
