To read more articles like this, visit my blog
Answering a conceptual question in an interview doesn’t mean you will be better than others on the job, but it surely means you have the time and interest to understand the deep concepts in a framework.
One’s understanding of documentation separates a good developer from a great developer.
Today, we will look into some of these conceptual questions that you may want to know as a React developer. If you are looking for simple syntax-related questions, then this article is not for you!
Let’s get started!
1. What is Render Hijacking in React?
As Mr. Google says, Render Hijacking is
“The concept of render hijacking is the ability to control what a component will output from another component”.
Practically you wrap your component with another Higher-Order-Component (HOC). And then, you inject props according to your need that can cause a change in the rendering logic.
Basically, what you are doing is enabling the component to behave differently.
2. What will happen if you use setState() in the constructor?
When you use setState() React re-renders the whole component once again. So if you call setState() inside a constructor, React tries to re-render the component that does not exist, creating a recursive problem.
You would get errors like this:
Can only update a mounted or mounting component.
So we need to use this.state to initialize variables inside the constructor. Like the following
constructor(props) {
this.state = {
// anything that you want inside state
}
}
3. What are synthetic events in React?
Events are any browsers essentially parts. Like onclick , onscroll Etc. But as React works with a virtual dom, we need to have a wrapper that works consistently across different browsers.
React normalizes events so that they have consistent properties across different browsers. — React Documentation
So, in summary, synthetic events are a cross-browser wrapper for different events. Important to note: they are not mapped one-to-one with browsers native events.
4. What are portals in React?
If you want to render some child component into a DOM node outside the component tree hierarchy, then React Portal is the way to go.
The syntax for this is
ReactDOM.createPortal(child, container)
The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.
5. What is reconciliation?
When a component’s props or state change, We need to re-render the component. Whether the actual DOM will be updated or not depends on the difference between these two nodes (previous and current).
But to compare 2 nodes, we will need an O(n³) complexity which is not practical in real-life scenarios. That’s why React team has decided to use a heuristic approach.
And the name of this process is called reconciliation. If you are interested, refer to the documentation.
6. Why does React uses className over the class?
class Is a keyword in JavaScript, and JSX is an extension of JavaScript. That’s the principal reason why React uses className instead of class.
render() {
return <span className={'menunavigation-menu'}>{'Menu'}</span>
}
Pass a string as the className prop.
7. What is React Fiber?
Fiber is the new reimplementation of the core algorithm in React v16. We already talked about reconciliation, and the new implementation is called React Fiber.
Here is great documentation for you to follow if you are interested in understanding the core concepts.
8. What is the Goal of React Fiber?
The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
9. What are uncontrolled components?
The normal way to store state in a react component is useState or this.state . But one problem is that they are tied to the rendering process. As a result, in some cases, you face some difficulty.
If you store the state of a component using, ref then that component is called an uncontrolled component. it’s more like traditional HTML
In the below UserProfile component, the name input is accessed using ref.
class UserProfile extends React.Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
this.input = React.createRef()
}
handleSubmit(event) {
alert('A name was submitted:' + this.input.current.value)
event.preventDefault()
}
render() {
return <div></div>
}
}
10. Why are fragments better than container divs?
Below is the list of reasons,
Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on huge and deep trees.
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout.
The DOM Inspector is less cluttered.
11. What are the limitations of React?
Apart from the advantages, there are few limitations of React too,
React is just a view library, not a full framework.
There is a learning curve for beginners who are new to web development.
Integrating React into a traditional MVC framework requires some additional configuration.
The code complexity increases with inline templating and JSX.
Too many smaller components leading to over-engineering or boiler-plate.
12. How to create props proxy for HOC component?
You can add/edit props passed to the component using a props proxy pattern like this:
function HOC(WrappedComponent) {
return class Test extends React.Component {
render() {
const newProps = { title: 'New Header', footer: false, showFeatureX: false, showFeatureY: true }
return <WrappedComponent {...this.props} {...newProps} />
}
}
}
13. What happens if you use props in the initial state?
The constructor function never updates the current state of the component. It’s called only once before the component is mounted.
So let’s say we are using props to initialize the state of a component.
function SomeComponent(props){
const [count , setCount]= useState(props.count);
}
Now if the props.count changes from the parent, then the child will never be updated because the useState was called only once. So it’s not a good idea to pass props to initialize state.
14. Do Hooks replace render props and higher-order components?
Both render props and higher-order components render only a single child, but in most cases, Hooks are a simpler way to serve this by reducing nesting in your tree.
15. Can you force a component to re-render without calling setState?
Whenever your component's state or props change, the component will re-render. But if, for some reason, we have to force a component to re-render, then what we can call the foreUpdate() function.
component.forceUpdate(callback)
16. Why you can’t update props in React?
The React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child but can’t modify received props.
That’s it. Maybe you knew some of them or maybe you didn’t. I think (and hope) you have learned a thing or two from this article.
Have a great day!
Resources:
Synthetic Events: **https://reactjs.org/docs/events.html
React Portal: **https://reactjs.org/docs/portals.html
React Fiber:** https://github.com/acdlite/react-fiber-architecture
StackOverflow Forum: **https://stackoverflow.com/questions/48144659/what-is-render-hijacking-in-react
Have something to say? Get in touch with me via LinkedIn or Personal Website
Top comments (5)
Useful! Some of the questions are new to me.
Thanks.
Welcome!
Thank you for sharing this.
Along with set of interview questions, a hands on on any tech for important concepts is really helpful
You're welcome!
Great post, but there are a few inaccurate statements that I feel the need to correct.
The DOM node does not have to be outside the component tree hierarchy. It can be any DOM element, whether rendered by the component tree or not.
Uncontrolled components are simply the opposite of controlled components—they manage their state internally. It has nothing to do with relying on
useStatevs relying onuseRef. In fact,useStateinside an uncontrolled component is completely valid.refonly plays a role here in how the current state can be accessed (read) from by the parent component.You can confirm this in the docs here.
I would challenge an interviewer asking me such a question. They are not better or worse; they behave completely differently depending on the situation. In many cases you need the wrapper div, and in other cases the div breaks behavior. Only in the cases where the wrapper is redundant would a fragment be "better" to reduce the number of DOM elements.
This is not accurate.
useStatewill be called on every render. There's no magic to skip one line of code or another in a functional component. It's just that theuseStatewill only use the argument passed the first time it's called because during the first time, the variable holding the state in theuseState's closure is stillundefined.This is not accurate either. If your component is supposed to react when the value passed as a prop changes, then it seems like a use-case for a controlled component, and you shouldn't be initializing internal state to copy that value.
If you want to take a default value, and then manage the state internally afterwards, then you don't expect the default value to change during the component's lifecycle.