ReactJS Interview Questions and Answers

Answer - 21 : - The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Answer - 22 : - JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.

Answer - 23 : - When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

Answer - 24 : - Before React 1 componentWillMount: Executed before rendering and is used for App level configuration in your root component. 2 componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur. 3 componentWillReceiveProps: Executed when particular prop updates to trigger state transitions. 4 shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop. 5 componentWillUpdate: Executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true. 6 componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. 7 componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component. React 1 getDerivedStateFromProps: Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need derived state. Worth reading if you need derived state. 2 componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur. 3 shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop. 4 getSnapshotBeforeUpdate: Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position. 5 componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false. 6 componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

Answer - 25 : - A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it's a pattern that is derived from React's compositional nature. We call them pure components because they can accept any dynamically provided child component but they won't modify or copy any behavior from their input components. const EnhancedComponent = higherOrderComponent(WrappedComponent) HOC can be used for many use cases: 1. Code reuse, logic and bootstrap abstraction. 2. Render hijacking. 3. State abstraction and manipulation. 4. Props manipulation.

Answer - 26 : - Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components. const {Provider, Consumer} = React.createContext(defaultValue)

Answer - 27 : - The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces. Single-line comments:

Answer - 28 : - When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

Answer - 29 : - Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 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.

Answer - 30 : - If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.