What are ‘props’ in React?
Props are mainly a special keyword in React. It stands for properties and is mostly used to pass data from one component to another. These are single values or objects having a set of values. Props are passed to the React Components using a naming convention like HTML tag attributes. Moreover, the props data is read-only. This means that the data from the parent is better if not changed by the child components. Props in React offers component functionality like passing custom data to the React component, triggering the state changes, etc.
class ComponentName extends Component {
render() {
return ( Props is : - , {this.props.name} )
}
}
function ComponentName(props) {
return ( Props is : - , {props.name} )
}
How to create ‘refs’?
With refs, it becomes easy to access DOM nodes that too directly in React. These are created using the React.createRef () method. It is then attached to the React elements through the ref attribute. If you want to use the refs, you have to assign the ref to the instance property. If you want, you can also use it in functional components using the closures.
class ComponentName extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
)
}
}
React Hooks: What is use State () in React?
It is one of the built-in react hooks. use State (0) returns a tuple. Here, the primary parameter count is mostly the current state of the counter. Besides, setCounter helps to update the counter state. You can also use the setCounter method for updating the State of Count anywhere. In this case, you can use it in the setCount function as here you can do more things. With hooks, you can make the codes functional and even avoid class-based components.
const [data, setData] = useState(null);
What are higher-order components?
It is a function, which takes a component and then it returns a new component. Mainly, it is a pattern derived from React’s compositional nature. You can call it ‘pure components’ since you can accept dynamically proved child components. However, it would not modify or copy the behavior from the input components.
const newComponent = higherOrderComponent(wrapComponent);
What is the role of refs in React?
Refs are mainly an escape hatch that helps in getting direct access to the instance of a component or DOM element. If you want to use it, you have to add a ref factor to the component. Its value is a callback function that will receive the underlying DOM element or the mounted instance of the component as the primary argument. Often things are misconstrued that you have to use a class component to use refs. However, you can still use refs with functional components. For this, you have to leverage closures in JavaScript.
What is the difference between class component and functional component?
Class components use ES6 class syntax and can make use of various lifecycle methods. Apart from that, they extend from React. Component. Here, you will have to use the keyword for accessing the props as well as functions, which you declare inside the class components. Coming to the application areas, the class component is used for the dynamic source of data. It also handles changed data
class ComponentName extends Component {
constructor() {
super()
this.state = {
data: null
}
render() {
return ( {data} )
}
}
Whereas, functional components are quite simpler when compared to class-based functions. It mainly focuses not on the behavior but the UI of the application. Precisely, these mostly render function, especially in the class component. Moreover, functional components can have a state as well as mimic lifestyle events through Reach Hooks. A functional component is widely used for presenting static data and these are easy to write.
const [data, setData] = useState(null);
function ComponentName(props) {
return ( {data} )
}
What does the component to be mounted in React means?
‘Mounting’ is React ‘renders’ component for the first time. It helps in building the initial DOM from the instructions. Component to be mounted in React means it has a corresponding element, which is created in the DOM and it is connected to that.
What is the difference between state and props?
Props and state are simple JavaScript objects. Although both of these help in holding information, which influences output render, they are quite different in terms of their functionality with respect to its component. Props is an object of arbitrary inputs and state is the data, which changes over the lifetime of the specific instance of any React component. Props mostly get passed to the component similar to the function parameters. State is mostly managed inside the component similar to the variables declared within a function.
What is the purpose of using a super constructor with props argument?
It is important to understand that the child class constructors cannot use the reference until the super () method has been called. The same thing applies to the ES6 sub-classes too. The primary purpose of the passing props parameter to super () call is the access to the props in the child section.
Mention the difference between a controlled component and an uncontrolled one in react?
It reacts to the stateful DOM components and the React docs do clearly explain the difference. Controlled components are something that takes their current value through props. It notifies the changes through callbacks like onChange. When it comes to the controlled component, form data is handled by the state inside the component. State in the component works as the ‘single source of truth’, especially for the input elements rendered by the component.
The uncontrolled Component is the one, which stores its own state internally. You can query the DOM using a ref for finding its current value. Moreover, they work like traditional HTML form elements. Data for each input gets stored in the DOM and not in the component.
From the given code, can you find out two problems?
The constructor does not pass the props to the superclass and just includes the following lines. The event listener is not rightly scoped since ES2015 does not provide auto binding. Hence, the developer can re-assign clickHandler in the constructor for including the correct binding.
Can you initialize the state from a function? Give some examples.
Yes, it is easy to initialize a state from a function.
Do React Hook update immediately?
It is important to understand that React useState and setState do not make any changes in the state objects. Instead, they create queues for optimizing performance. Due to this reason, the changes do not immediately update. Besides, the process for updating React state is quite asynchronous for various performance reasons.
What is wrong with the code?
The codes may update asynchronously and you must not believe in its values when it comes to calculating the next state. If you want to fix it, you can use the second form of setState (), which accepts a function and not an object. This function receives the previous state as the first argument and the props when the update is applied as the second argument.
What are React Hooks?
Hooks are mainly the latest addition in React 16.8. It allows you to use the state as well as other React features without writing a class. Using Hooks, it becomes easy to extract stateful logic from a component. Hence, you can test it independently and reuse. Hooks help you to reuse the stateful logic without changing any component hierarchy. Therefore, it becomes easy to share Hooks among other components or with the community.
What are the advantages of using React Hooks?
Hooks primarily help in the extraction and reuse of the stateful logic. It is common across various components and does not have any burden of high-order components or render props. Apart from that, Hooks also help in easily manipulating the state of the functional component without changing it into a class component. Also, hooks do not work inside classes. Using them, you can avoid using various lifecycle methods like componentDidMount, componentDidUpdate, etc.
Mention the various phases of the ReactJS component lifecycle.
Mainly there are four different phases of React component’s lifecycle. First comes the initialization and in this phase react component prepares to set the initial state and default props.
Next, is mounting and in this phase, the react component is ready to mount in the browser DOM. The mounting phase covers componentWillMount as well as componentDidMount lifecycle methods.
The third phase is updating and in this phase, the component is updated in two different ways, sending new props and updating the state. Updating phase covers shouldComponentUpdate, componetWillUpdate, and componentDidUpdate lifecycle methods.
Finally, unmounting is the last phase and in this phase, the component is not needed and gets unmounted from browser DOM. In this phase, you will find componentWillUnmount lifecycle methods.
What are the lifecycle methods of ReactJS?
First is the componentWillMount, which is executed before rendering and is used for App level configuration in the root component. componentDidMount is executed after the first rendering. The AJAX requests, DOM or state updates and set up eventListeners should occur. Next, is the componentWillRecieveProps, which is executed when any particular prop updates for triggering state transitions. shouldComponentUpdate determines whether the component will be updated or not. Once you are sure that the component does not have to render after the props are updated, it becomes easy to return the false value.
componetWillUpdate is executed before re-rendering components when there are pros and state changes confirmed shouldComponentUpdate, which turns out to be true. For updating the DOM in response to the prop or state changes, componentDidUpdate is useful. componentWillUnmount is used for canceling any outgoing network requests. Besides, it is also used for removing all event listeners connected to the component.
What can you tell me about JSX?
When Facebook released React, it also introduced a whole new dialect of JavaScript known as JSX, which helps in embedding raw HTML templates in JavaScript code. JSX code is impossible to read by the browser. Therefore, it should be transpiled to traditional JavaScript through tools such as Babel and webpack. Although many developers initially face knee-jerk reactions, JSX turned out to be the defacto method of describing React components.
What does three dots in React do?
Three dots mean property spread notation and was added in ES2018.
What is prop drilling and how you can avoid it?
While making a React application, the demand for deeply nested components remains high. It helps in using the data offered by other components, which are higher in the hierarchy. One of the simplest approaches is by simply passing a prop from each component to the next one in the hierarchy. It should be from the source component to the deep nested component and it is known as prop drilling.
When it comes to the primary disadvantage, prop drilling is the components that should not be aware of the data becomes unnecessarily complicated. Moreover, it becomes tough to maintain. If you want to avoid prop drilling, one of the common approaches that you can use is using React context. It allows the provider component, which supplies data to be defined and lets nested components consume context data either through a consumer component or useContext hook.
What is Strict Mode in React?
The Strict Mode is a helper component that aids in writing better react components. Besides, you can even wrap a set of components through Strict Mode. It mainly verifies that the components in it follow few recommended practices. It even warns you in case you are not in the console.
Moreover, it also verifies the deprecated methods, which are not being used. Even if it is used, the strict mode will no doubt warn you. Strict Mode also helps in preventing few side effects simply by finding out the potential risks.
What is the difference between Shadow DOM and Virtual DOM?
Virtual DOM is all about avoiding unwanted changes to the DOM that are expensive performance-wise. It is because of changes in the DOM cause re-rendering of the page. Besides, it also helps in collecting various changes that have to be applied. Therefore, every single change does not cause a re-render. Instead, re-rendering happens once a set of changes is applied to DOM.
Shadow DOM is all about the encapsulation of the implementation. A single custom element implements various complex logics combined with complex DOM. A complete web application of arbitrary complexity can be added to a page by an import. However, various simpler reusable and composable components can be implemented as custom elements.
Why do class methods need to be bound to a class instance?
It is important to understand that the value of ‘this’ in JavaScript changes based on the present context. When it comes to the React class component methods, developers usually expect this for referring to the current instance of a component. Therefore, it is vital to bind these methods to the instance.
Why we should not update the state directly?
In case you want to update the state directly, then normally it won’t re-render the component. Therefore, you have to use the setState () method. It helps in scheduling updates to the component’s state object. There are certain reasons behind not updating State. After the update, the setState () might get replaced by what you have changed before. If you directly update the State, it does not get changed. Otherwise, it might create a transition that will be pending. After accessing, the method will turn into the present value. You might lose control of the state more than any other component.
