General
- How is Stateless component different from a Stateful component?
- What is the difference between state and props?
- What can you do if the expression contains more than one line?
- What kind of information controls a segment in React?
- Explain DOM Diffing in React.
- What do you understand by the term polling?
- What’s the difference between an Element and a Component in React?
- Why should we not call setState in componentWillUnmount?
- What is the difference between React Native and React?
- What are React Hooks?
- When would you use a Class Component over a Functional Component?
- How to prevent a function from being called multiple times?
- Describe how events are handled in React.
- How to dispatch the data in-store?
- What do you understand by “Single source of truth”?
- Why is switch keyword used in React Router v4?
- How do you tell React to build in Production mode and what will that do?
- How do you access imperative API of web components?
- What is the benefit of strict mode?
- What is the difference between createElement and cloneElement?
- What are the rules one needs to follow regarding hooks?
- What are the conditions to safely use the index as a key?
- Explain Presentational segment
- What is Relay?
- Can we make changes inside child components?
- What is route based code splitting?
- Explain the purpose of render() in React.
- What is render hijacking?
- What are React Events?
- What do you know about Flux?
- What is ReactDOMServer?
- How do the parent and child components exchange information?
- Where would you put AJAX calls in your React code?
- What is the use of Webpack?
- What is the difference between DOM and virtual DOM in React.js?
- Why do we need a Router to React?
- Why did you choose to work with react?
- List down the advantages of React Router.
- What is create-react-app?
- What are some of the major advantages to using react when building UIs?
- Why are you not required to use inheritance?
- How is React different from Angular and VUE?
- What is the second argument that can optionally be passed to setState and what is its purpose?
- What are Higher Order Components(HOC)?
- What is suspense component?
- Is it possible to display props on a parent component?
- Name 3 ways to create a component in React and its differences.
- Is setState() async? Why?
- What is the point of renderToNodeStream method?
- What is prop drilling and how can you avoid it?
- What do you understand by “In React, everything is a component.”
- How do you say that state updates are merged?
- What is the behavior of uncaught errors in react 16?
- How does JSX prevent Injection Attacks?
- What do you understand by mixin or higher order components in ReactJS?
- What do you understand by Props in React?
- How is Virtual-DOM more efficient than Dirty checking?
- Is it mandatory to define constructor for React component?
- What is the difference between a controlled component and an uncontrolled component?
- What are the rules needs to follow for hooks?
- React has something called a state. What is it and how it is used?
- What is JSX?
- Explain the use of Redux thunk?
- Is setState() is async? Why is setState() in React Async instead of Sync?
- What is the difference between async mode and concurrent mode?
- What does shouldComponentUpdate do and why is it important?
- Explain React Decorators
- What are the different phases of React component’s lifecycle?
- What is the purpose of eslint plugin for hooks?
- How would you debug an issue in react code? What debugging tools have you used?
- What are the lifecycle methods of ReactJS?
- How is ReactJs different from AngularJS?
- What would be two of the most significant drawbacks of React?
- What are synthetic events in React?
- Can you force a React component to rerender without calling setState?
- What is arrow function in React? How is it used?
- Mention the key benefits of Flux?
- Why are fragments better than container divs?
- What are refs in React?
- Is it ref argument available for all functions or class components?
- In ReactJS, why there is a need to capitalize on the components?
- What are the benefits of using typescript with reactjs?
- How would you structure a React application?
- What is the use of a super keyword in React?
- Why are String Refs considered legacy?
- When should you use the top-class elements for the function element?
- What is the methods order when component is re-rendered?
- Explain the Virtual DOM and its working.
- Is it possible to nest JSX elements into other JSX elements?
Advanced
- How does React know when to re-render App component if we handle window resizing in useWindowSize?
- Explain Flexbox and its benefits
- Why do we need a key property? Give an example when a bad key causes an error.
- React unit tests vs integration tests for components.
- What is windowing technique?
- Explain the positives and negatives of shallow rendering components in tests.
- What are the problems of using render props with pure components?
- Do you know what the reconciliation algorithm is?
- How to prevent components from re-rendering?
- How would you optimise the performance of a React application?
- What are the drawbacks of MVW pattern?
Redux
- What are the advantages of formik over redux form library?
- Can Redux only be used with React?
- How Relay is different from Redux?
- What are selectors? Why would you use reselect or a memoization library?
- What is the mental model of redux-saga?
- What is an action in Redux?
- Why are Redux state functions called reducers?
- What are the core principles of Redux?
- What are the downsides of Redux compared to Flux?
The stateless component calculates the internal state of the component but does not have the authority to change state. There is no knowledge about the past, current, or future but receives props from the Stateful component, which are treated as a callback function.
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 component. ie:
- Props get passed to the component similar to function parameters.
- State is managed within the component similar to variables declared within a function.
In such a situation, enclosing the multi-line JSX expression is an option. If you are a first time user, it may seem awkward but later you can understand everything very easily. Many times it becomes necessary to avoid multi-lines to perform the task reliably and for getting the results as expected.
There are mainly two sorts of information that control a segment: State and Props.
- State: State information that will change, we need to utilize State.
- Props: Props are set by the parent and which are settled all through the lifetime of a part.
The process of checking the difference between the new VDOM tree and the old VDOM tree is called "diffing". Diffing is accomplished by a heuristic O(n) algorithm. During this process, React will deduce the minimum number of steps needed to update the real DOM, eliminating unnecessary costly changes. This process is also referred to as reconciliation.
The server needs to be monitored to for updates with respect to time. The primary aim in most of the cases is to check whether novel comments are there or not. This process is basically considered as pooling. It checks for updates approximately every 5 seconds. It is possible to change this time period easily. Pooling help keeping an eye on the users and always make sure that no negative information is present on the servers. Actually, it can create issues related to several things and thus pooling is considered.
Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.
A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets compiled to a createElement invocation).
You should not call setState() in componentWillUnmount() because the component will never be re-rendered.
React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.
React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.
If your component has state or a lifecycle method(s), use a Class component (or Hooks). Otherwise, use a Functional component.
If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be achieved in the below possible ways:
- Throttling: Changes based on a time based frequency. For example, it can be used using _.throttle lodash function.
- Debouncing: Publish changes after a period of inactivity. For example, it can be used using _.debounce lodash function.
- RequestAnimationFrame throttling: Changes based on requestAnimationFrame. For example, it can be used using raf-schd lodash function.
The event handlers in React will be passed instances of SyntheticEvent to solve cross-browser compatibility issues. As we mentioned earlier, SyntheticEvent is React’s cross-browser wrapper around the browser’s native event. The synthetic events have the same interface as the native ones but they work identically across all browsers.
However, React doesn’t actually attach events to the child nodes themselves. Instead, it uses a single event listener in order to listen to all events at the top level which. Not only is this great for the performance but it also means that React doesn’t have to keep track of the event listeners when updating the DOM.
We can dispatch the data to another component which should be based on the action which stores the parent component.
Single source of truth (SSOT) is the practice of structuring information models and associated data schema such that every data element is mastered (or edited) in only one place. Redux uses Store to store the entire state of the application at one location. So all the state of the component is stored in the store and the store itself receives updates. The single state tree makes tracking modifications simpler over time and debugging or inspecting the request.
Within the Switch component, Route and Redirect components are nested inside. Starting from the top Route/Redirect component in the Switch, to bottom Route/Redirect, each component is evaluated to be true or false based on whether or not the current URL in the browser matches the path/from prop on the Route/Redirect component. Switch is that it will only render the first matched
You set process.env.NODE_ENV to production. When React in production mode, it’ll strip out any extra development features like warnings.
Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
It activates additional checks and warnings for its descendants. Note: Strict mode checks are run in development mode only; they do not impact the production build.
It is helpful in the following cases:
- Identifying components with unsafe lifecycle methods.
- Warning about legacy string ref API usage.
- Detecting unexpected side effects.
- Detecting legacy context API.
- Warning about deprecated findDOMNode usage.
createElement is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI). cloneElement is utilized as a part of request to clone a component and pass it new props. They nailed the naming on these two.
You need to follow two rules in order to use hooks:
- Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.
- Call Hooks from React Functions only. i.e, You shouldn’t call Hooks from regular JavaScript functions.
There are three conditions to make sure, it is safe use the index as a key.
- The list and items are static– they are not computed and do not change.
- The items in the list have no ids.
- The list is never reordered or filtered.
A presentational part is a segment which allows you to renders HTML. The segment’s capacity is presentational in markup.
Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.
Yes, we can make changes inside the child component in Props but not in the case of States.
A good place to start code splitting is with app routes. Break down an application into chunks per route, and then load that chunk when user navigate that route. Under the hood, webpack takes care of creating chunks and serve chunks to the user on demand.
We have to just create asyncComponent and import the desired component by using dynamic import() function.
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 concept of render hijacking is the ability to control what a component will output from another component. It actually means that you decorate your component by wrapping it into a Higher-Order component. By wrapping you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually "ENABLES" hijacking, but by using HOC you make your component behave in different way.
Events are reactions (the library IS called React, right?) that are triggered by specific user actions like clicking on a UI button, hovering a mouse over a UI object, using keyboard commands with the UI, etc.
Basically, Flux is a basic illustration that is helpful in maintaining the unidirectional data stream. It is meant to control construed data unique fragments to make them interface with that data without creating issues. Flux configuration is insipid; it's not specific to React applications, nor is it required to collect a React application. Flux is basically a straightforward idea, however in you have to exhibit a profound comprehension of its usage.
The ReactDOMServer object enables you to render components to static markup (typically used on node server). This object is mainly used for server-side rendering (SSR). The following methods can be used in both the server and browser environments:
- renderToString()
- renderToStaticMarkup()
This task is generally performed with the help of functions. Actually, there are several functions which are provided to both parent and child components. They simply make use of them through props. Their communication should be accurate and reliable. The need of same can be there anytime and therefore functions are considered for this task. They always make sure that information can be exchanged easily and in an efficient manner among the parent and child components.
It is possible to use any AJAX library with React, such as Axios, jQuery AJAX, as well as the inbuilt browser window.fetch. Data with AJAX calls need to be added to the componentDidMount() lifecycle method. By doing this, it is possible to use the setState() method for updating component as soon as the data is retrieved.
Webpack in general is a module bundler, thanks to many plugins it provides although a lot more and it can be used to run tasks, clean build directories, check linting, handle typescript support, increase performance, provide chunking and a lot more.
DOM aka Document Object Model is an abstraction of structured code (HTML). Dom and HTML code are interrelated as the elements of HTML are known as nodes of DOM. It defines a structure where users modify the content present in the structure in any way they want (create, edit, alter, modify etc.). Basically, HTML is a text, DOM is an in-memory representation of this text.
Virtual DOM is a representation of DOM objects like a lightweight copy. It is used and provided for free by React.js
We need a Router to React so that we could define the multiple routes whenever the user types a particular URL. This way, the application of a particular router can be made when the URL matches the path defined inside the router.
This kind of question is less about rattling off facts related to JSX, Virtual DOMs, props, or state, and more about explaining to an employer why you have a professional interest in working with React JS. One of the main reasons this question (and your answer) is of interest to an interviewer is because it gives a sense of how you might explain the importance of using React to a non-technical client or stakeholder.
To answer, simply think of what drew you to React JS. It can be something as basic as the fact that React is easy to learn and start with, but allows plenty of room for growth over time (showing your willingness to learn new things and expand your knowledge as you go), or something as practical as the fact that there are so many job opportunities for React developers (showing you keep on top of the industry and are able to adapt as needed).
- Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component (
) in which we enclose the specific child routes ( ). - No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the
component. - The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.
create-react-app is the official CLI (Command Line Interface) for React to create React apps with no build configuration. We don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that we can focus on the code. We can install easily just like any other node modules.
Some of the major advantages of using React include:
- Increased application performance via the Virtual DOM model.
- Improved coding efficiency with JSX.
- The ability to reuse components across multiple projects.
- Flexibility and extensibility through add-on tools provided by React’s open source community.
In React, it is recommend using composition instead of inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Whereas, If you want to reuse non-UI functionality between components, it is suggested to extracting it into a separate JavaScript module. Later components import it and use that function, object, or a class, without extending it.
The core difference between React and Vue is that React lacks any form of “abstraction”. It’s very much just straight JavaScript. This brings some of the drawbacks of of JS. If you’re a JS expert, React will give you more power. But if you are lacking the expertise, Vue will smooth some of the rough patches for you. It’s also worth noting that Vue doesn’t work with Arrow functions in the same way React does.
VUE.js was launched in 2014 and since then, it has been the most rapidly growing js framework. It is particularly useful for building intuitive interfaces while also being extremely adaptable. VUE is a web application framework that helps in making advanced single page applications.
Angular is a typescript based JavaScript application framework developed by Google, not a collection of libraries and it relies more on HTML than on JS. Despite the slowdown in recent years it’s actually used very widely for government and enterprise projects, which depend on a stable, well-established, and consistent ecosystem. It is also known as Super-heroic JavaScript MVW Framework. Its initial purpose was to encounter the challenges of creating single page apps. AngularJS is the oldest version of the Angular framework.
A callback function which will be invoked when setState has finished and the component is re-rendered.
Since the setState is asynchronous, which is why it takes in a second callback function. With this function, we can do what we want immediately after state has been updated.
Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.
Suspense is a component that wraps your own custom components. It lets your components communicate to React that they're waiting for some data to load before the component is rendered. It is important to note that Suspense is not a data fetching library like react-async, nor is it a way to manage state like Redux.
Yes, it is possible. The best way to perform this task is by using the spread operator. It can also be done with listing the properties but this is a complex process.
There are 3 main ways of creating a component. Extending from the Component class, extending from the PureComponent class or using a stateless function as component. The main difference is that we don’t have access to lifecycle methods in a stateless function nor to the state. PureComponent also implements componentShouldUpdate by default and provides a shallow compare for its props and state preventing unnecessary re-renders.
setState() actions are indeed asynchronous. setState() doesn’t immediately mutate this.state. Instead, it creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
The reason behind is the way setState alters the state and causes rerendering. Making it synchronous might leave the browser unresponsive. That being said, the setState calls are asynchronous as well as batched for better UI experience and performance.
It is used to render a React element to its initial HTML. Returns a Readable stream that outputs an HTML string. The HTML output by this stream is exactly equal to what ReactDOMServer.renderToString would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
When building a React application, there is often the need for a deeply nested component to use data provided by another component that is much higher in the hierarchy. The simplest approach is to simply pass a prop from each component to the next in the hierarchy from the source component to the deeply nested component. This is called prop drilling. The primary disadvantage of prop drilling is that components that should not otherwise be aware of the data become unnecessarily complicated and are harder to maintain. To avoid prop drilling, a common approach is to use React context. This allows a Provider component that supplies data to be defined, and allows nested components to consume context data via either a Consumer component or a useContext hook.
Building blocks of the UI of a React application are components. These parts divide the entire UI into tiny parts that are autonomous and reusable. Then it becomes independent of each of these parts without affecting the remainder of the UI.
State update are merged means that when you update only one key in the object state it will not affect the other keys. and key2 would not exist anymore in your state as it was not defined in your update. The merging affects key/value pair which are not included in your update.
In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.
By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
Higher order components (HOC) is a function that takes component as well as returns a component. It is a modern technique in React that reuses the component logic. However, Higher order components are not a part of React API, per se. These are patterns that emerge from React’s compositional nature. In other words, HOC’s are functions that loop over and applies a function to every element in an array.
Prop is a contraction for Properties in React. These read-only components need to be kept immutable i.e. pure. Throughout the application, props are passed down from the parent components to the child components. In order to maintain the unidirectional data flow, a child component is restricted from sending a prop back to its parent component. This also helps in rendering the dynamically generated data.
First thing to understand here is that in React, each component has a state which is observable. React knows when to re-render the scene because it is able to observe when this data changes. The observables are significantly faster than the Dirty checking because we don’t have to poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed. In a situation like that, React can simply listen for change events on the state and queue up re-rendering. Long story short, the virtual DOM is more efficient than the Dirty checking simply because it prevents all the unnecessary re-renders. Re-rendering only occurs when the state changes.
No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.
A large part of React is this idea of having components control and manage their own state. What happens when we throw native HTML form elements (input, select, textarea, etc) into the mix? Should we have React be the “single source of truth” like we’re used to doing with React or should we allow that form data to live in the DOM like we’re used to typically doing with HTML form elements? These two questions are at the heart of controlled vs. uncontrolled components.
A controlled component is a component where React is in control and is the single source of truth for the form data. As you can see below, username doesn’t live in the DOM but instead lives in our component state. Whenever we want to update username, we call setState as we’re used to.
You need to follow two rules inorder to use hooks:
- Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.
- Call Hooks from React Functions only. i.e, You shouldn’t call Hooks from regular JavaScript functions.
States are the source of data for React components. In other words, they are objects responsible for determining components behavior and rendering. As such, they must be kept as simple as possible. Accessible by means of this.state(), state is mutable and creates dynamic and interactive components.
JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. Eventhough React does not require JSX, it is the recommended way of describing our UI in React app.
Redux thunk acts as middleware which allows an individual to write action creators that return functions instead of actions. This is also used as a delay function in order to delay dispatch of an action if a certain condition is met. The two store methods getState() and dispatch() are provided as parameters to the inner function.
setState() actions are asynchronous and are batched for performance gains.
setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. Thus the setState calls are asynchronous as well as batched for better UI experience and performance.
Both refer to the same thing. Previously concurrent Mode being referred to as "Async Mode" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.
What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components). Why would we ever want to do this? As mentioned above, “The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state”. If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.
Decorators in React help you take an existing Class component, or function of a Class component, and modify it, thereby allowing you to add extra capabilities, without having to mess with the existing codebase. Modification can be overriding the existing function completely, or just adding extra logic to it. In essence, decorators take one function, and return another function after spicing it up. React and decorators can go hand-in-hand due to presence of Higher Order Components , and Higher Order Functions.
There are three different phases of React component’s lifecycle: Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM. Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase. Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.
The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that, - Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook). - Hooks are called in the same order on every render.
Debugging as a crucial part of the development process. Before you start your next React JS job interview, make sure you have experience with the following industry standard debugging tools (and can explain how you’d use them):
- Linters (eslint, jslint)
- Debuggers (React Developer Tools)
- componentWillMount: Executed before rendering and is used for App level configuration in your root component.
- componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up eventListeners should occur.
- componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
- 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 rerender if component receives new prop.
- componentWillUpdate: Executed before re-rendering the component when there are pros & state changes confirmed by shouldComponentUpdate which returns true.
- componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
- componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
The first difference between both of them is their code dependency. ReactJS depends less on the code whereas AngularJS needs a lot of coding to be done. The packaging on React is quite strong as compared to the AngularJS. Another difference is React is equipped with Virtual Dom while the Angular has a Regular DOM. ReactJS is all about the components whereas AngularJS focus mainly on the Models, View as well as on Controllers. AngularJS was developed by Google while the ReactJS is the outcome of facebook. These are some of the common differences between the two.
- Integrating React with the MVC framework like Rails requires complex configuration.
- React requires the users to have knowledge about the integration of user interface into MVC framework.
Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.
In your component, you can call this.forceUpdate() to force a rerender.
Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.
Applications that are built on Flux have components that can simply be tested. By simply updating the store, developers are able to manage and test any react component. It cut down the overall risk of data affection. All the applications are highly scalable and suffer no compatibility issues.
- It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
- 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 while extracting logical components.
- The DOM inspector is less cluttered.
Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.
Regular function or class components don’t receive the ref argument, and ref is not available in props either. The second ref argument only exists when you define a component with React.forwardRef call.
It is necessary because components are not the DOM element but they are constructors. If they are not capitalized, they can cause various issues and can confuse developers with several elements. At the same time, the problem of integration of some elements and commands can be there.
Below are some of the benefits of using typescript with ReactJS:
- It is possible to use latest JavaScript features.
- Use of interfaces for complex type definitions.
- IDEs such as VS Code was made for TypeScript.
- Avoid bugs with the ease of readability and Validation.
This is an open question with many possible answers. The basic structure is usually module or feature based. We usually differentiate between UI and logic. There are many approaches to structure UI components with the most popular being atomic design. Data and business heavy applications use a more domain driven approach. The ideal combination for larger applications is having the domain logic separate and having the UI logic in an atomic structure. All this can be combined in features which are rendered on pages.
The super keyword helps you to access and call functions on an object’s parent.
If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like ref={'textInput'}, and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have below issues, and are considered legacy. String refs were removed in React v16.
- They force React to keep track of currently executing component. This is problematic because it makes react module stateful, and thus causes weird errors when react module is duplicated in the bundle.
- They are not composable — if a library puts a ref on the passed child, the user can't put another ref on it. Callback refs are perfectly composable.
- They don't work with static analysis like Flow. Flow can't guess the magic that framework does to make the string ref appear on this.refs, as well as its type (which could be different). Callback refs are friendlier to static analysis.
- It doesn't work as most people would expect with the "render callback" pattern
If your element does a stage or lifetime cycle, we should use top-class elements.
An update can be caused by changes to props or state. The below methods are called in the following order when a component is being re-rendered.
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
A virtual DOM is a lightweight JS object. It is simply a copy of the real DOM. A virtual DOM is a node tree that lists various elements, their attributes, and content as objects and their properties.
The render() function in React is responsible for creating a node tree from the React components. This tree is then updated in response to the mutations resulting in the data model due to various actions made by the user or the system.
Virtual DOM operates in three simple steps:
- Step 1 – The entire UI is re-rendered in Virtual DOM representation as soon as there are some underlying data changes.
- Step 2 – Now, the difference between the previous DOM representation and the new one (resulted from underlying data changes) is calculated.
- Step 3 – After the calculations are successfully carried out, the real DOM is updated in line with only the things that actually underwent changes.
It is possible. The process is quite similar to that of nesting the HTML elements. However, there are certain things that are different in this. You must be familiar with the source and destination elements to perform this task simply.
When you call setSize inside the custom hooks, React knows that this hook is used in App component and will re-render it.
Flexbox is a layout-ing method which solves many previous problems with handling layouts in CSS. It eliminates the need for different GRID libraries and using floats to position blocks on the site. It has a very intuitive api and gives a lot more control and flexibility.
There are classic diffing algorithms with O(n³) time complexity, which might be used for creating a tree of React elements. But it means for displaying 1000 elements would require one billion comparisons.
Instead, React implements a heuristic O(n) algorithm with an assumption that the developer can hint at which child elements may be stable across different renders with a keyprop.
What about a bad key? Well, an index might be a very bad key if you decide to make your children removable. Check out this demo. Try to type something in the second input and then remove the first one. But you still can see the value in the second one, why so?
Because your keys are unstable. After removal, your third child with a key equals to 3, now has a key equals to 2. It’s not the same element for React now. And it will match it to the wrong DOM element, which previously had a key equals to 2 (which keeps the value we typed in a second input).
It’s worth mentioning both Enzyme and react-testing-library.
React testing library provides a clean and simple API which focuses on testing applications “as a user would”. This means an API returns HTML Elements rather than React Components with shallow rendering in Enzyme. It’s is a nice tool for writing integrational tests.
Enzyme is still a valid tool, it provides a more sophisticated API which gives you access to component’s props and internal state. It makes sense to create unit tests for components.
Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.
Positives:
- It is faster to shallow render a component than to fully render it. When a React project contains a large number of components, this performance difference can have a significant impact on the total time taken for unit tests to execute.
- Shallow rendering prevents testing outside the boundaries of the component being tested—a best practice of unit testing.
Negatives:
- Shallow rendering is less similar to real-world usage of a component as part of an application, so it may not catch certain problems. Take the example of a
<House />component that renders a<LivingRoom />component. Within a real application, if the<LivingRoom />component is broken and throws an error, then<House />would fail to render. However, if the unit tests of<House />only use shallow rendering, then this issue will not be identified unless<LivingRoom />is also covered with unit tests.
If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.
It is the algorithm responsible for figuring out what changed between re-renders and how to update the actual DOM. It is basically a diffing algorithm. The latest addition of improvements on the core algorithm is called React Fiber.
- shouldComponentUpdate() — returns ‘true’ by default. You can override if you know which props have to trigger an update.
- PureComponents — The difference between them is that React.Component doesn’t implement shouldComponentUpdate method but React.PureComponentimplements it with a shallow prop and state comparison.
- React.memo — The same as the previous one but it works with functional components.
The most expensive task in a React app is the update of the DOM. The basic optimisation is to reduce how many times a component re-renders. This can be achieved by using componentShouldUpdate, using PureComponent or memoization libraries like reselect. Reducing the size of the final JS file also helps improving performance and we can use dynamic imports and chunks for this.
- DOM manipulation is very expensive which causes applications to behave slow and inefficient.
- Due to circular dependencies, a complicated model was created around models and views.
- Lot of data changes happens for collaborative applications(like Google Docs).
- No way to do undo (travel back in time) easily without adding so much extra code.
Below are the main reasons to recommend formik over redux form library:
- The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary.
- Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This way it increases input latency for large apps.
- Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB
Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.
Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.
Selectors are functions which accept the state and return a portion of it while applying calculations, transformations, mappings, filtering etc. This way the logic of how to retrieve data for a specific view is encapsulated in a selector. Since many of the mentioned operations are expensive, when calling the selector again without state change, you want to skip the expensive operations as they will return the same results and hence the usage of reselect. Reselect will return the results from the Cashe in case arguments didn’t change.
Saga is like a separate thread in your application, that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal Redux actions, it has access to the full Redux application state and it can dispatch Redux actions as well.
It is a function which returns an action object. The action-type and the action data are always stored in the action object. Actions can send data between the Store and the software application. All information retrieved by the Store is produced by the actions.
Reducers always return the accumulation of the state (based on all previous and current actions). Therefore, they act as a reducer of state. Each time a Redux reducer is called, the state and action are passed as parameters. This state is then reduced (or accumulated) based on the action, and then the next state is returned. You could reduce a collection of actions and an initial state (of the store) on which to perform these actions to get the resulting final state.
Redux follows three fundamental principles:
- Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
- State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
- Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.
- You will need to learn to avoid mutations: Flux is un-opinionated about mutating data, but Redux doesn't like mutations and many packages complementary to - - Redux assumes you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, Immutable.js, or instructing your team to write non-mutating code.
- You're going to have to carefully pick your packages: While Flux explicitly doesn't try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a rich ecosystem.
- There is no nice Flow integration yet: Flux currently lets you do very impressive static type checks which Redux doesn't support yet.
Shortlist the best talent today
(100% free to get started, no credit card required)
