React Interview Questions
Why are fragments better than container divs
A little more performant because you're not adding another div to the dom Can be helpful with some css patterns like flexbox and grid
what do smart components do in a redux application?
strip data off of store and give to dumb children trigger actions (dispatch actions)
Why should we not call 'setState' in 'componentWillUnmount'?
the component will never be re-rendered
Can you force a react component to re-render without calling setState?
yes, this.forceUpdate()
what do actions do in a redux application?
* dispatch other actions (async actions dispatches fetch data action which dispatches receiveData action)
What is route-based code splitting?
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.
What are the phases of the react component lifecycle
Initial Rendering, Updating, Unmounting
Explain the use of Redux thunk
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.
What is the optional second argument of setState()
callback function. because setState() is async, it can take a callback function and do what we want immediately after the state is updated
What is the methods order when a component is re-rendered?
static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()
Controlled vs Uncontrolled components
uncontrolled -- takes values directly from DOM controlled -- everything passed through react state
What are the rules one needs to follow regarding 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.
When would you use class components over functional components?
* If your component has state or a lifecycle method(s), use a Class component (or Hooks). Otherwise, use a Functional component.
What is the benefit of 'strict' mode?
* 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.
What is the difference between React native and React?
* 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
What is the difference between an element and a component in React?
* a React element describes what you want to see on the screen ( the html) * a react component is a class or function that wraps the react element
What does it mean by, in React, everything is a component?
* all pieces of UI are autonomous and reusable building blocks
Explain DOM diffing in React
* checking the difference between the new VDOM and the old VDOM
Flow of react sagas
* dispatch action normally in component * watchers catch when specified actions are dispatched and perform async functions (save data on server) * when async task is done, it will dispatch another action that will be consumed by the reducer (it is a DIFFERENT action)
Describe how events are handled in React
* event handlers are wrapped in SyntheticEvents from cross-platform compatibility * React doesn't attach events to child nodes themselves, instead it adds a single event listener at the top level
What are generator functions?
* functions that can be exited and later re-entered. their context will be saved across re-entrances * you can pause the function and restart it later * they are cooperative, we choose when to pause the function, we re-initiate it when we are ready
generator syntax
* keyword that comes right after `function` `yield` expression pauses the function and outputs a value `yield` can also take in a value when we restart the function `*yield` is used to delegate to another outside generator function
What is SSOT?
* single source of truth is the practice of structuring information so that each data element is edited in only one place (Redux uses Store)
How are stateful components different from stateless components?
* stateless component receive state as props * they can manipulate these values, but cannot change the actual state
What are React hooks?
* they let you use state and other react features in functional components * 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.
what are some characteristics of watchers?
* they live in a 'sagas' directory * they are generator functions
What is prop drilling and how can you avoid it?
* unnecessarily passing props through children in order to get to a specific descendent * react context api solves this * redux solves this
How do you prevent a function from being called multiple times?
* when using events like onClick or onScroll, you may want to limit the number of times the function is called * throttling - changes based on time-based frequency * debouncing - changes based on period of inactivity
What is the use of a super keyword in React?
Allows a class object to access and call functions on it's parent
How does JSX prevent injection attacks?
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.
Explain 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.
What is the behavior of uncaught errors in React 16?
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.
What are some advantages of using react when building UIs
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.
Where would you put AJAX calls if your react code?
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.
What is the point of renderToNodeStream method?
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.
What are the advantages of React Router?
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.
What are props?
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.
What is render hijacking?
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.
What are the conditions to safely use 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.
What is the difference between state and props?
The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events. Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.
How do you access an imperative API of web components?
Web Components often expose an imperative API. For instance, a video Web Component might expose play() and pause() functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. 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.
What is the use of webpack?
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.
Why is switch keyword used in React Router v4?
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 child.
How do you tell react to build in production mode and what will it do?
You set process.env.NODE_ENV to production. When React in production mode, it'll strip out any extra development features like warnings.
What does shouldComponentUpdate do and why is it important?
allows components and their children to opt out of reconciliation process and be as efficient as possible when updating the UI based on new state
What are the lifecycle methods of React
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.
What is the difference between createElement and cloneElement?
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.
what do reducers do?
modify a piece of data off of the store (immutably)
Benefits of flux over redux
more simple testing of components,
How is virtual dom more efficient than dirty checking?
prevents unnecessary re-renders