Interview Prep Questions React
What is Higher OrderComponents(HOC)?
A higher order compoment is a function that takes in a component and returns a new one. React.memo() is a HOC that ensures that a component won't rerender if its props haven't changed.
Why can't browsers read JSX?
Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.
List some of the major advantages of React.
It increases the application's performance with its use of the Virtual Dom, it can be used client side or server side, the JSX components allow for easy readability and better management of code. It can integrate with other frameworks like Meteror or Angular. It has a strong community base.
What is a ref in React?
It's an attribute that can be created using the createRef(). They provide a way to access React elements and give an escape hatch for you to modify a child component outside of the parent to child dataflow.
List down the advantages of ReactRouter.
ReactRouter allows for fast routing between components since the DOM renders most of the data. With Lazy loading and suspense, it can easily show a transition between switching components. The useNavigate hook is also helpful for passing data to components that don't have a parent-child relationship. Routing to different components don't require separate pages to render or refresh.
What can you do with HOC?
Since a HOC is a function that takes in a component and returns a new one, you can do a lot of things with it. A HOC I use the most is React.memo(), it ensures that the component you passed in it won't be rerendered if the props haven't changed.
What is a state in React and how is it used?
State is React object that contains data that the component needs. They are mutable and whenever they change, the component will rerender. You can only change them with a setState and all setStates are async and batched together. To access them in a class component you use this.State
What are synthetic events in React?
SyntheticEvent is a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
How come when you declare a variable in any js or jsx file outside of any class, object, or function, it's not really global to all other files, components?
To have a global variable in react, you need to make one in your .env file. React won't take global variables from .js or .jsx because they restrict access to these files with import export. Variables in .env are also assumed to be immutable, unlike variables in other files which could change after each rerender.
What are the features of React?
Virtual DOM, Jsx files, components, one-way data binding, single-page application, performance, simplicity.
How can you embed two or more components into one?
We can do this because React allows parent-child relationships via a DOM tree. You can first import the child components inside the parent component, then call them inside what the parent component is returning using angle brackets.
How do you modularize code in React?
We can modulize code by using components. Components are separated into different files and can be used with Import Export. Dividing code into separate components allows them to be reusable and easily managed.
Can different versions of the same package be used in the same application?
Yes you can with custom aliases. It will be add/install customName@npm:[email protected]
How can you update the state of a component?
You use setState. In a class component, if you want to update one thing it would be this.setState({theThing: updated}). For a functional component, if the state has other properties besides the thing you want to update, you would need to use prevState so you don't lose everything else.
What is React?
- React is a front-end JavaScript library developed by Facebook in 2011. - It follows the component based approach which helps in building reusable UI components. - It is used for developing complex and interactive web and mobile UI. - Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
What is a constructor? Is it required?
A constructor initializes state at the start of a class component. It also binds event handlers to an instance. If you don't need state or eventhandlers, then you don't need to use a constructor.
What is arrow function in React? How is it used?
Arrow functions allows us to write anonymous functions. You can use them as an inline function or define them like you would with a regular function. The most important reason you should use arrow functions in React is that arrow functions don't require you to keep binding objects with this. Plus they're useful for higher order functions.
What is the difference between calling a promise and using a `.then` vs using `await`?
Await in an async function will pause executing the function until the promise settles, meaning there's a success or rejection. A .then will be skipped and once the promise settles, the .then will execute.
What do you know about controlled and uncontrolled components?
Controlled components take in props from its parent and if they need props to change, they use a callback function. An example of one would be an input and onChange would call a setState. An uncontrolled component manages its own state, so using the same example, instead of using onChange, you use ref.
In package.json, how can you ensure that only patch version updates are accepted when npm install is run? (i.e. upgrading from 2.3.0 to 2.3.1 is okay, but not 2.4.0 or greater)
If you only want to install minor patches, you should only use ~ before the version in package.json file. But if you're ready to go from 2.1.0 to 2.2.0 but not 3.0.0 then you can use ^.
How different is React's ES6 syntax when compared to ES5?
In ES6 we can declare a variable with const and let instead of only just var. We can also now use import instead of require and when exporting a component ES6 uses export default. When defining a function, we can use arrow functions now.
What is an event in React?
In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements.
What are the different ways that you can call setState
In a functional component, you can use it in a useEffect or any new function you create including success or error handlers for Api calls. As for class components, you can call them simliarly to functional components, except instead of useing useEffect, you use ComponentDidMount or ComponentDidUpdate.
What are the different phases of React
In the component lifecycle, there is mounting, updating, and unmounting.
What is React.memo?
It's a higher order component that takes in a component, and doesn't rerender the component if it sees that the props haven't changed. I often use React.memo when the component I pass in it is also being mapped.
Is setState a synchronous or async call?
It's async. React does this to ensure the browser still remains responsive and not stop everything to wait for state to change. All setState calls are batched together for better performance.
How is React Router different from conventional routing?
It's dynamic and allows us to build single-page applications without having to refresh the page. It's use of components is also unique because you can route to a component or a combo of comonents, whenever and wherever you need it.
What is JSX?
JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.
What is the significance of keys in React?
Keys help React identify mapped components and lets React know which one to change, add, and remove. They must be unique amongst their siblings and shouldn't simply be an index in case the order of the components get rearranged.
Explain the lifecycle methods of React components in detail.
Mounting: is the initial phase and it's where all the React elements gets rendered into the DOM. Updating: is where a component gets rerendered if there's a change within its state or props. Unmounting: is when a component gets removed from the DOM.
What is NPM / Yarn?
NPM is node package manager. Not only does it have a website that hosts open source packages, it helps you install and manage those packages in your projects. Yarn is yet another resource negotiator, similar to NPM. One of its biggest advantages is it installs packages simultaneously.
In calling setState, when would you pick one method of calling this function over the other?
One method would be passing an object to setState and you would use it for simplicity and efficiency. The second method is passing an updater function which will allow you use prevState so you won't end up wiping old data from the state.
What is Props?
Props stand for properties. They are read-only, needs to be immutable, and are passed down from parent to child components only. This helps in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.
What are Pure Components?
Pure components are components that always return the same output if its state and props haven't changed. If it sees that its state and props haven't changed after doing a shallow comparison, meaning making sure references point to the same place, then the pure component won't rerender.
What do you understand from "In React, everything is a component."
React Components are reusable bits of code that have a similar purpose to Javascript functions except they return HTML. They can be rendered independent of each other without affecting the rest of the UI.
What is React Router?
React Router is a library for React that is responsible for routing. It manages which views you see from components, allows the URL to change, and keeps the UI in sync with the URL.
What are the limitations of React?
React updates frequently which means there's limited documentation and can give developers not enough time to get used to one update before another is released. React's library is massive and and JSX can be hard to grasp for initially. So there's a steep learning curve.
Why do we need a Router in React?
Router in React Router v4&5 is a basic router that allows React to navigate to other components with matching paths. Now that's replaced with Routes in v6. A BrowserRouter stores the current location in the address bar with clean URLs and has its own history stack. So backspace will go to the previous page.
Differentiate between stateful and stateless components. Stateful vs Stateless Components React
Stateless components have no state whereas stateful does. A stateless component accepts props from a parent component, and if that data needs to be changed, then the stateless component would have to use a callback function that would change the prop inside the parent component.
Differentiate between Real DOM and Virtual DOM. Real DOM vs Virtual DOM
The Real DOM is everything you see in a browser page so changing things in the real DOM will require having to rerender everything. As for the virtual DOM, it's a UI representation of the Real DOM kept in memory, so it's not what you see on the screen. However, React can directly manipulate stuff in the virtual DOM and then syncs those changes to the real DOM in a process called reconciliation. This makes things faster and more efficient.
Explain the purpose of render() in React.
The render() method is a required method for a class component. It examines the props and state and returns either a React element like a div or Component, an array of elements, a portal, strings, numbers, booleans, or null.
Why is Switch component used in React Router v4?
The switch component renders the first route that matches its path and it allows for nested routes. Router can't handle nested routes and renders all routes that have the same path unless you do exactPath. In v6, everything switch does is done via Routes.
Which of these are required properties of the object in your package.json file?
The two most important properties in a package.json is name and version. Name to identify the package from all others and version to identify any changes. Unrequired ones are description, keywords, bugs, funding, license, dependencies, devDependencies.
What is the virtual DOM? Explain how it works within ReactJS.
The virtual DOM is a UI representation of the DOM kept in memory. When there's a change in the virtual DOM, react syncs that with the real DOM in a process called reconciliation. Thanks to that, React doesn't have to keep rendering all its components when it's just few components that changed.
List some of the cases when you should use Refs.
When you need to manage focus, select text, or media playback. To trigger imperative animations. Integrate with third part DOM libraries.
How are forms created in React?
You can create a form simliar to how you would create one in HTML such as using the <form> tag and <input> tag for a basic one. The main difference is storing your data in state. You need to have a value prop that points to state and a name prop. You also need an onChange handler that sets state to the new value.
How do you create an event handler in React?
You first create an arrow function for the event handler and the name needs to be camelCased. Event handlers are passed as functions instead of a string. In order to prevent default, you have to use the preventDefault() method.
