Prev Next

Angular / ReactJS

1. What is React? 2. Advantages of using ReactJS. 3. Explain Virtual DOM. 4. What is JSX? 5. Who created ReactJS? 6. is ReactJS an MVC framework? 7. What are the major features of React? 8. Mention a few React hooks. 9. What is useContext in react? 10. What is context in React? 11. What is the need for Babel in React? 12. What are React fragments? 13. How do you specify CSS class for HTML elements in React? 14. What are Custom hooks in React? 15. What is PropTypes in react? 16. When does React decide to re-render a component? 17. Difference between using "useState" hook and just a variable in React. 18. How do you create a Class component in React? 19. What are the lifecycle methods of class Component in React? 20. What is the role of constructor() in React components? 21. Difference between Shadow DOM and Virtual DOM. 22. Difference between Element and Component. 23. When to use a Class Component over a Function Component? 24. What is React PureComponent? 25. Difference between state and props in React. 26. Why should we not update the react component state directly? 27. What are synthetic events in React? 28. What is React Fiber? 29. What are controlled components? 30. Difference between createElement and cloneElement. 31. What is Lifting State Up in React? 32. How to write comments in React? 33. What is Error Boundaries in React? 34. What is ReactDOMServer? 35. Differentiate between Real DOM and Virtual DOM. 36. What is the purpose of render() in React. 37. How do I force a React component to re-render? 38. How is React different from Angular? 39. What are Higher-order components in React? 40. Why do we need to use keys in Lists? 41. Difference between Dumb components and Smart components in React. 42. How do you create a form in React? 43. Advantages of using REDUX. 44. Is setState asynchronous? 45. What is prop drilling? 46. Explain Redux Thunk. 47. What are default props in React? 48. What are events in React? 49. Advantages of React hooks. 50. What is memoize in React? 51. How do I implement shouldComponentUpdate using React hooks?
Could not find what you were looking for? send us the question and we would be happy to answer your question.

What is React?

React is an Open source Javascript library for building dynamic User interfaces (UI).

React works on the "V" in MVC pattern.

ReactJS is maintained by facebook, Instagram and a community of individual contributers.

It has nothing to do with the backend or controller of the application.

Advantages of using ReactJS.

React helps design simple declarative views for each state in your application.

Encapsulated components.

Dynamic properties & state .

Increases the application's performance by using Virtual DOM.

Completely independent of the rest of the application.

Can render on the client or the server.

JSX makes easy coding and ensure high code readability.

Explain Virtual DOM.

ReactJS abstracts away the DOM and creates its own version which is simplified and includes the information that you need.

Virtual DOM helps identify which portion of DOM has changed. It is more lightweight and works faster.

What is JSX?

JSX, or JavaScript XML, is an extension to the JavaScript language syntax.Similar in appearance to HTML, JSX provides a way to structure component rendering using a syntax familiar to many developers.

JavaScript XML(JSX) is 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 their performance.

render(){

return(

<div>

<h1> Hello!</h1>

</div>

);

}
Who created ReactJS?

React.js is maintained by Facebook and a community of individual developers and companies. The initial release was in 2013.

is ReactJS an MVC framework?

No. ReactJS is NOT an MVC framework. It is a library for building composable user interfaces that enables the creation of reusable UI components which present data that changes over time.

What are the major features of React?

It uses VirtualDOM instead RealDOM that avoids RealDOM manipulations which are expensive.

Supports server-side rendering.

Uses Unidirectional data flow or data binding.

Leverages reusable/composable UI components to develop the view.

Mention a few React hooks.

The basic hooks are,

  • useState,
  • useEffect,
  • useContext.
What is useContext in react?

useContext hook allows passing data to children elements without using redux. useContext is a named export in react so we can import into functional components like import {useContext} from 'react'; It is an easy alternative to Redux if we just need to pass the data to the children elements.

What is context in React?

React's context allows you to share information to any component, by storing it in a central place and allowing access to any component that requests it (usually you are only able to pass data from parent to child via props).

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)

What is the need for Babel in React?

Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript. Babel transpiles JSX to vanilla Javascript and also converts the ES6 code to a code that is compatible with the browsers.

Web browsers cannot read JSX directly because they are built to only read regular JS objects. For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object for which we use Babel.

What are React fragments?

React fragments are a common pattern in React for a component to return multiple elements. Fragments let you group a list of children without having to add extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
     <h1>React Fragment example</h1>
      <ComponentA />
      <ComponentB />
      <ComponentC />
 </React.Fragment>
  );
}

There is also a shorter syntax you can use for declaring fragments. It looks like empty tags <> </>:

render() {
   return (
      <>
       <ComponentA />
       <ComponentB />
      </>
    );
}
How do you specify CSS class for HTML elements in React?

Use className attribute instead of class.

What are Custom hooks in React?

A custom hook enables you to extract some component's logic into a reusable functionality. A custom hook is a Javascript function that starts with use (for example, useLogging, useReduxStore) and that can call other hooks as well.

What is PropTypes in react?

PropTypes exports a range of validators that can be used to make sure the data you receive is valid.

For performance reasons, propTypes is only checked in development mode.

When does React decide to re-render a component?

React re-render a component when its state or prop has changed. The state can change from a props change, or from a direct setState change. The component gets the updated state and React decides if it should re-render the component.

Difference between using "useState" hook and just a variable in React.

useState rerenders the view. Variables by themselves only change in memory and the state of your app can get out of sync with the view.

use "useState" hook to store the state if that state needs to be sync/utilized in the rendered view. For all other needs, utilize variables.

How do you create a Class component in React?

React lets you define components as classes or functions. To define a React component class, you need to extend React.Component.

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.username}</h1>;
  }
}

You must define in a React.Component subclass, the only method named render().

What are the lifecycle methods of class Component in React?

The lifecycle methods are executed in the following order when a component instance being created and inserted into the DOM.

Mounting:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Updating:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Unmounting:

  • componentWillUnmount() is called when a component is being removed from the DOM.

Error Handling:

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

  • static getDerivedStateFromError()
  • componentDidCatch()
What is the role of constructor() in React components?

Implement a constructor in your React component when,

  • Initializing local state by assigning an object to this.state.
  • Binding event handler methods to an instance.

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use componentDidMount() instead.

Difference between Shadow DOM and Virtual DOM.

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

Difference between Element and Component.

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

The object representation of React Element would be as follows:

const element = React.createElement(
  'div',
  {id: 'sign-in-btn'},
  'Sign in'
)

The above element renders to the DOM using ReactDOM.render():

<div id='sign-in-btn'>Sign in</div>

a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

const Button = ({ onSignIn}) =>
  <div id={'sign-in-btn'} onClick={onSignIn}>Sign in</div>

Then JSX gets transpiled to a React.createElement() function tree:

const Button = ({ onSignIn}) => React.createElement(
  'div',
  { id: 'sign-in-btn', onClick: onSignIn },
  'Sign in'
)

When to use a Class Component over a Function Component?

If the component needs state or lifecycle methods then use class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component.

However with the hooks feature in Functional component, we can have states, so it is preferred to create function components.

What is React PureComponent?

React.PureComponent is similar to React.Component except that React.Component doesn't implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Difference between state and props in React.

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to components.

Props get passed to the component similar to function parameters whereas the state is managed within the component similar to variables declared within a function.

CriteriaState Props
Can receive Initial value from parent component? YesYes
Can parent component update/change value? NoYes
Can we set default values inside a component? YesYes
Can value change inside component? YesNo
Can we set initial value for child components? YesYes
Can value be changed inside child components? NoYes
Why should we not update the react component state directly?

If you try to update state directly then it won't re-render the component.

use setState() method to update the state of a variable. It schedules an update to a component's state object. When state changes, the component responds by re-rendering.

What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. Its API is the same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

What is React Fiber?

React Fiber is the reimplementation of React's core algorithm. 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.

Fiber is the new reconciliation engine in React 16.

What are controlled components?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

For example, to write all the names in uppercase letters, we use handleChange as below,

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()})
}

Difference between createElement and cloneElement.

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.

What is Lifting State Up in React?

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.

How to write comments in React?

The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.

Single-line comments:

<div>
  {/* Single-line comments */}
  {`Welcome ${user}!`}
</div>

Multi-line comments:

<div>
  {/* Multi-line comments for more than
   one line */}
  {`Welcome ${user}!`}
</div>

What is Error Boundaries in React?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Error boundaries do not catch errors for: Event handlers, Asynchronous code, Server Side Rendering (SSR), and Errors thrown in the error boundary itself (rather than its children).

Error boundaries work like a JavaScript catch {} block, but for components. Only class components can be error boundaries.

What is ReactDOMServer?

The ReactDOMServer object enables you to render components to static markup. Typically, itÂ’s used on a Node server. This object is mainly used for server-side rendering (SSR).

// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

The following methods can be used in both the server and browser environments:renderToString() and renderToStaticMarkup().

import { renderToString } from 'react-dom/server'
import HomeComponent from './HomeComponent'

app.get('/', (req, res) => {
  res.write('<!DOCTYPE html><html><head><title>My Page</title></head><body>')
  res.write('<div id="content">')
  res.write(renderToString(<HomeComponent/>))
  res.write('</div></body></html>')
  res.end()
})

Differentiate between Real DOM and Virtual DOM.
Real DOMVirtual DOM
Real DOM updates happen slowly.Virtual DOM updates faster.
Manipulating the DOM is slow.Manipulating the virtual DOM is much faster.
takes too much of memory.Takes less memory.
Allows direct update of HTML.Cannot update HTML directly.
What is the purpose of render() in React.

Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>,<div> etc.

This function must be kept pure i.e., it must return the same result each time it is invoked.

The ReactDOM.render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

For example, below code display the paragraph inside the "root" element:

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

The result is displayed in the <div id="root"> element.

How do I force a React component to re-render?

React components render and update based on a change in state or props automatically. Update the state from anywhere and suddenly your UI element updates.

In most cases you should never force a React component to re-render; re-rendering should always be done based on state or props changes. However, the below are legitimate options for the need to force a render in a few cases.

Using this.forceUpdate(), we can force a re-render. Calling this method also skips shouldComponentUpdate.

By calling the setState method with setting the existing state, we can invoke re-render.

method() {
    // Forces a render
    this.setState({ state: this.state });
}

How is React different from Angular?

CriteriaReactAngular
Learning CurveAngular has its own learning curve but comparitively easy .React has steep learning curve as it doesn't include routing library and need onboarding of state management libraries ilke Redux/MobX.
Ease of development and ProductivityThe Angular CLI eases development experience.The use of third-party libraries affects the speed of React development and productivity.
PerformanceAngular uses real DOM for its applications which makes the apps using Angular slower. React uses a virtual DOM and is best suited for pages that need regular content updates. The size of the library is small too, which makes it more lightweight and dynamic.
Data BindingThe Angular framework uses a two-way binding approach that changes the model state automatically when any change is made in the UI element and vice versa.The React library uses a one-way approach that allows the change in the UI elements only after a change is made in the model state.
Regular DOM vs Virtual DOMAngular uses real DOM, so the whole tree structure is refreshed when a single change is made. This makes the process slower. React uses a Virtual DOM, which allows the developers to make changes to the tree without the need to update the entire tree.
Flexibility and PerformanceAngular does not provide the flexibility that React does.React provides the developers with a lot of tools, libraries, and varying architecture to choose from.
AuthorFacebookGoogle
What are Higher-order components in React?

A higher-order component is a function that takes a component and returns a new component. Higher-order components enable code reuse and ideal for cross-cutting patterns. HOC may be used to add functionality to components.

An ideal example of HOC is connect() function in React Redux, that provides state capability to any component.

const HomeScreen = ({ navigation }) => {
return (
    <SafeAreaView>
        ...

    </SafeAreaView>
)
}
const mapDispatchToProps = dispatch => (
    bindActionCreators({
      logout
    }, dispatch)
);


const mapStateToProps = (state) => {


    console.log("mapStateTOPROps ran", state)
    const { subjects } = state
    return { subjects }
};

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

Why do we need to use keys in Lists?

A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists. It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered.

Difference between Dumb components and Smart components in React.

Dumb components and smart components are a design pattern in React.

Smart components handle and process the business logic while dumb components directly render the UI. Smart components are stateful whereas dumb components are stateless and rely only on props.

How do you create a form in React?

React forms are identical to HTML forms. However, the state is contained in the state property of the component in React and is updateable only via the setState() method.

The elements in a React form cannot directly update their state. Their submission is handled by a JS function, which has full access to the data entered into the form by a user.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Advantages of using REDUX.
  • Maintainability, the code is easier to maintain.
  • Organized code.
  • Developer Tools, allows developers to track/debug all activities, ranging from actions to state changes, happening in the application in real-time.
  • Easy Testing.
  • Large-scale Community, Redux is backed by a mammoth community. It contributes to an ever-growing and refined library and ready-to-use applications.
Is setState asynchronous?

Yes. setState also has a second parameter that takes a callback function.

this.setState(
  { nsmr: 'javapedia.net' },
  () => console.log('setState has completed and the component has been re-rendered.')
)

What is prop drilling?

Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

Explain Redux Thunk.

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of action or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

An action creator that returns a function to perform asynchronous dispatch:

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER,
  };
}

function incrementAsync() {
  return (dispatch) => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

An action creator that returns a function to perform conditional dispatch:

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

What are default props in React?

defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed.

class UserComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div>Welcome {this.props.userName}</div>
    }
}
CatComponent.defaultProps = {
    userName: "Guest"
  
}

What are events in React?

When some actions are performed in React, such as hovering the mouse or pressing a key, clicking the button, trigger events. These events perform a set of activities as a response to these triggers. Handling an event in React similar to how we handle it in DOM architecture.

Events created in React as shown below. In this example, we are handling onPress event.

const SampleFunctionalComponent = ({ name }) => {

const displayName = () => {
// handle event here
}
 return (
        <ListItem onPress={() => displayName()} key={id} >
{name}
</ListItem>

)
}

export default SampleFunctionalComponent

const styles = StyleSheet.create({})

Advantages of React hooks.

  • Eliminates the need for class-based components, lifecycle hooks, and this keyword.
  • Hooks makes it easy to reuse logic, by consolidating common functionality into custom hooks.
  • More readable, testable code as it isolates logic from the components itself.

What is memoize in React?

Memoizing in React is a performance feature of the framework that aims to speed up the render process of components. Memoization works like caching so for the same input return cached output.

React has 3 APIs for memoization: memo, useMemo, and useCallback.

The technique is used in a wide spectrum of disciplines, from game engines to web applications.

How do I implement shouldComponentUpdate using React hooks?

You can wrap a function component with React.memo to shallowly compare its props:

const Button = React.memo((props) => {
  // your component
});

It's not a Hook because it doesn't compose like Hooks do. React.memo is equivalent to PureComponent, but it only compares props. React.memo doesn't compare state.

«
»
Typescript interview questions

Comments & Discussions