react 16 interview questions

Here are some ReactJS Interview Questions on basic concepts.
  • What are the features of React? …
  • What is JSX? …
  • Can web browsers read JSX directly? …
  • What is the virtual DOM? …
  • Why use React instead of other frameworks, like Angular? …
  • What is the difference between the ES6 and ES5 standards? …
  • How do you create a React app?

Before you go! Take this “React Interview Questions” interview guide with you

React is an efficient, flexible, and open-source JavaScript framework library that allows developers to the creation of simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook created React. It was first deployed on the news feed of Facebook in 2011 and on Instagram in 2012. Developers from the Javascript background can easily develop web applications with the help of React.

React Hooks will allow you to use the state and other features of React in which requires a class to be written by you. In simple words, we can say that, React Hooks are the functions that will connect React state with the lifecycle features from the function components. React Hooks is among the features that are implemented latest in the version React 16.8.

Scope of React: The selection of the right technology for application or web development is becoming more challenging. React has been considered to be the fastest-growing Javascript framework among all. The tools of Javascript are firming their roots slowly and steadily in the marketplace and the React certification demand is exponentially increasing. React is a clear win for front-end developers as it has a quick learning curve, clean abstraction, and reusable components. Currently, there is no end in sight for React as it keeps evolving. Crack your next tech interview with confidence! Take a free mock interview, get instant⚡️ feedback and recommendation

React Interview Questions for Freshers

React is a front-end and open-source JavaScript library which is useful in developing user interfaces specifically for applications with a single page. It is helpful in building complex and reusable user interface(UI) components of mobile and web applications as it follows the component-based approach.

The important features of React are:

  • It supports server-side rendering.
  • It will make use of the virtual DOM rather than real DOM (Data Object Model) as RealDOM manipulations are expensive.
  • It follows unidirectional data binding or data flow.
  • It uses reusable or composable UI components for developing the view.
  • Toptal sourced essential questions that the best React.js developers and engineers can answer. Driven from our community, we encourage experts to submit questions and offer feedback.

  • Im hiring
  • I’m looking for work
  • Explain the Virtual DOM, and a pragmatic overview of how React renders it to the DOM.

    The Virtual DOM is an interesting concept; it’s a complex idea that boils down into a much simpler algorithm.

    In React, if we create simple ES6 class and print it out, we have a function (as all functions can be used as a constructor in JavaScript):

    The console.log(Comments) gives us something that looks like this (after compiled by Babel from ES6 to ES5):

    When we write something to draw a React Component to the screen, we might have something like the following:

    The JSX gets transpiled into ES5 by Babel as well:

    We can see that is transpiled directly into React.createElement(Comments, null). This is where we can see what a Virtual DOM object actually is: a plain JavaScript Object that represents the tag to be rendered onto the screen.

    Let’s inspect the output of React.createElement():

    This gives us:

    See how the type is a string? DOM.render({...}) gets this object above and looks at the type, and decides whether or not to reuse an existing

    element on the DOM or create a new

    and append it.

    The Virtual DOM is not a simple Object – it is a recursive structure. For example, if we add two elements beneath the

    :

    What we get is a nested Object-tree:

    This is why, in a React Component’s code, we can access the child and ancestor elements via this.props.children. What React will do is walk down a very deep tree of nested Objects (depending on your UI complexity), each sitting in their parent element’s children.

    One thing to note is that the type so far has just been a string. When a React Element is made from a custom Component (like Comments above), the type is a function:

    gives us:

    You can play around with a web version of this code at Matthew Keas’ github.

    Explain the standard JavaScript toolchain, transpilation (via Babel or other compilers), JSX, and these items’ significance in recent development. What sort of tools might you use in the build steps to optimize the compiled output React code?

    The bleeding edge JavaScript toolchain can seem quite complex, and it’s very important to feel confident in the toolchain and to have a mental picture of how the pieces fit together.

    There are a couple primary pillars in the JavaScript toolchain: Dependency Management, Linting, Style-checking, Transpilation, and Compilation, Minification, Source-Mapping.

    Typically, we use build tools like Gulp, Watchify/Browserify, Broccoli, or Webpack to watch the filesystem for file events (like when you add or edit a file). After this occurs, the build tool is configured to carry out a group of sequential or parallel tasks.

    This part is the most complex piece, and is the center of the development process.

    The rest of the tools belong in that group of sequential or parallel tasks:

  • Style linting – typically a linter like JSCS is used to ensure the source code is following a certain structure and style
  • Dependency Management – for JavaScript projects, most people use other packages from npm; some plugins exist for build systems (e.g. Webpack) and compilers (e.g. Babel) that allow automatic installation of packages being imported or require()‘d
  • Transpilation – a specific sub-genre of compilation, transpilation involves compiling code from one source version to another, only to a similar runtime level (e.g. ES6 to ES5)
  • Compilation – specifically separate from transpiling ES6 and JSX to ES5, is the act of including assets, processing CSS files as JSON, or other mechanisms that can load and inject external assets and code into a file. In addition, there are all sorts of build steps that can analyze your code and even optimize it for you.
  • Minification and Compression – typically part of – but not exclusively controlled by – compilation, is the act of minifying and compressing a JS file into fewer and/or smaller files
  • Source-Mapping – another optional part of compilation is building source maps, which help identify the line in the original source code that corresponds with the line in the output code (i.e. where an error occurred)
  • For React, there are specific build tool plugins, such as the babel-react-optimize presets that involves compiling code into a format that optimizes React, such as automatically compiling any React.createElement() calls into a JavaScript Object that inlines right into the source code:

    See also:

  • How compilers can help optimize React
  • How to bootstrap a modern toolchain with Create React App
  • The Next.js and GatsbyJS frameworks built on top of React
  • How would you create Higher Order Components (HOCs) in React?

    Higher Order Components (HOCs) are the coined term for a custom Component that accepts dynamically provided children. For example, let’s make Component that takes child tags as children, waits until the Component is scrolled into view, and then loads the s they point to in the background (before rendering them to the DOM).

    An HOC accepts children via props:

    Creating an HOC means handling this.props.children in the Component’s code:

    Noting a few things about this code:

  • We set up initial state (this.state = {loaded: 0}) in the constructor(). This will be set to 1 when the parent container is scrolled into view.
  • The render() returns the props.children as child elements when this occurs. Extract the src by using ES6 destructuring, where {props:{src}} creates a variable src with the appropriate value.
  • We used a single componentDidMount() lifecycle method. This is used because on mount, we’d like the component to check if the HOC is visible.
  • The largest function of our component, _scroll(), grabs the HOC Component’s DOM element with DOM.findDOMNode() and then gets the elements position. This position is compared to the height of the browser window, and if it is less than 100px from the bottom, then the scroll listener is removed and loaded is set to 1.
  • This technique is called HOC (Higher Order Component) because we pass in elements as this.props.children when we nest those elements inside the container component:

    All of these nested elements (which can be custom components) are nested under , thus HOC’s code will be able to access them as this.props.children.

    Apply to Join Toptals Development Network

    and enjoy reliable, steady, remote Freelance React.js Developer Jobs

    What is the significance of keys in React?

    Keys in React are used to identify unique VDOM Elements with their corresponding data driving the UI; having them helps React optimize rendering by recycling existing DOM elements. Let’s look at an example to portray this.

    We have two Components being rendered to a page, drawn in decreasing order of followers:

    Let’s say that B gets updated with 105 Twitter followers, so the app re-renders, and switches the ordering of A and B:

    Without keys, React would primarily re-render both Elements in the DOM. It would re-use DOM elements, but React won’t re-order DOM Elements on the screen.

    With keys, React would actually re-order the DOM elements, instead of rendering a lot of nested DOM changes. This can serve as a huge performance enhancement, especially if the DOM and VDOM/React Elements being used are costly to render.

    Keys themselves should be a unique number or string; so if a React Component is the only child with its key, then React will repurpose the DOM Element represented by that key in future calls to render().

    Let’s demonstrate this with a simple list of todos rendered with React:

    The setInterval() occurring on mount reorders the items array in this.state every 20ms. Computationally, if React is reordering the items in state, then it would manipulate the DOM elements themselves instead of “dragging” them around between positions in the

      .

      It is worth noting here that if you render a homogenous array of children – such as the

    • ’s above – React will actually console.warn() you of the potential issue, giving you a stack trace and line number to debug from. You won’t have to worry about React quietly breaking.

      What is the significance of refs in React?

      Similarly to keys, refs are added as an attribute to a React.createElement() call, such as

    • . The ref serves a different purpose, it provides us quick and simple access to the DOM Element represented by a React Element.

      Refs can be either a string or a function. Using a string will tell React to automatically store the DOM Element as this.refs[refValue]. For example:

      this.refs.someThing inside componentDidUpdate() used to refer to a special identifier that we could use with React.findDOMNode(refObject) – which would provide us with the DOM node that exists on the DOM at this very specific instance in time. Now, React automatically attaches the DOM node to the ref, meaning that this.refs.someThing will directly point to a DOM Element instance.

      Additionally, a ref can be a function that takes a single input. This is a more dynamic means for you assign and store the DOM nodes as variables in your code. For example:

      [Legacy projects only, < circa 2016] In a general overview, how might React Router and its techniques differ from more traditional JavaScript routers like Backbone’s Router?

      “Traditional” routers like the ever-popular Backbone.Router establish a predefined set of routes, in which each route defines a series of actions to take when a route is triggered. When combining Backbone.Router with React, you may have to mount and unmount React Components when the route changes:

      The router exists externally of the React Components, and the VDOM has to mount and unmount potentially frequently, introducing a possible slew of problems. React Router focuses on not just “single-level” routing, but enables – nay, empowers – the creation of HOCs that can “decide for themselves” what to render within them.

      This is where the advanced HOC implementations can really help simplify a seemingly complex notion. Let’s look at using a tiny router to assess some of the beauty of embedding application routers inside React HOCs. Here, we define a Component that wraps it’s own routing mechanism (router() not provided here, see universal-utils):

      This Router Component opts for parsing the routes object passed into this.props instead of reading over an array of React Components passed as this.props.children. React Router opts for the latter technique. Need proof? Take a look at this example code provided by React Router’s docs:

      A Component has one or more Components as items in this.props.children, and s can have sub-s. React Router’s code recursively walks down the tree of children until there are no more to process, allowing the developer to recursively declare routes in a structure that encapsulates sub-routes, instead of having to implement a Backbone-esque flat list of routes (i.e. "/", "/about", "/users", "/users/:id", etc).

      Why do class methods need to be bound to a class instance, and how can you avoid the need for binding?

      In JavaScript, the value of this changes depending on the current context. Within React class component methods, developers normally expect this to refer to the current instance of a component, so it is necessary to bind these methods to the instance. Normally this is done in the constructor—for example:

      There are several common approaches used to avoid this binding:

      You can download the PDF and Epub version of this repository from the latest run on the actions tab.

      The questions provided in this repository are the summary of frequently asked questions across numerous companies. We cannot guarantee that these questions will actually be asked during your interview process, nor should you focus on memorizing all of them. The primary purpose is for you to get a sense of what some companies might ask — do not get discouraged if you dont know the answer to all of them ⁠— that is ok!

      Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

      FAQ

      What should I study for React interview?

      It should give you an idea about the candidate past experience, past knowledge and development opportunities. The candidate should learn about your organisation and project (if possible) and get feedback on his performance vs. your expectations.

      How do you React to an interview?

      In a Java interview, select the project that took pride in developing and explain the project with confidence. Start explaining the project with the problem statement. Explain the entire process of how you developed the solution. Also, explain the obstacles you faced in the process and how you solved them.

      How do you describe a React Project interview question?

      Disadvantage of ReactJS
      • The high pace of development. The high pace of development has an advantage and disadvantage both. …
      • Poor Documentation. It is another cons which are common for constantly updating technologies. …
      • View Part. ReactJS Covers only the UI Layers of the app and nothing else. …
      • JSX as a barrier.

      What are the biggest limitations of React?

      Disadvantage of ReactJS
      • The high pace of development. The high pace of development has an advantage and disadvantage both. …
      • Poor Documentation. It is another cons which are common for constantly updating technologies. …
      • View Part. ReactJS Covers only the UI Layers of the app and nothing else. …
      • JSX as a barrier.

    Related Posts

    Leave a Reply

    Your email address will not be published.