What is React?
What are the major features of React?
What is JSX?
Is it possible to use React without JSX?
Yes, it is possible to use React without JSX. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files, but it is not required to use React.
Instead of using JSX, you can use plain JavaScript to create React elements. For example, you can use the React.createElement() method to create a new element:
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
);
This creates a new h1 element with a className of ‘greeting’ and a text content of ‘Hello, world!’.
What is the difference between Element and Component?
An element is a plain JavaScript object that describes a component’s UI at a specific point in time.
A component is a reusable, self-contained piece of UI that can contain multiple elements.
What is the difference between createElement and cloneElement?
createElement is what JSX gets transpiled to and is what React uses to create React Elements (object representations of some UI). cloneElement is used in order to clone an element and pass it new props.How to create components in React?
How to bind methods or event handlers in JSX callbacks?
.bind() method in the constructor or by using arrow functions.How to pass a parameter to an event handler or callback?
What is state in React?
What are props in React?
Why we need to be careful when spreading props on DOM elements?
...rest operator, so it will add only required props.What is children prop?
children is a prop (this.props.children) that allows you to pass components as data to other components, just like any other prop you use. Component tree put between component’s opening and closing tag will be passed to that component as children prop.React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.What is the key prop, and what is the benefit of using it in arrays of elements?
key prop is a unique identifier for elements in a list. It helps React identify which items have changed, been added, or been removed when rendering arrays of elements, improving performance and preventing unexpected behavior.What are render props?
<DataProviderrender = {data => (<h1>{`Hello ${data.target}`}</h1>)}/>
Can child component change the props passed from parent component?
Why we pass props as an argument in super?
super() method has been called. The same applies to ES6 sub-classes as well. The main reason for passing props parameter to super() call is to access this.props in your child constructors.What is the difference between state and props?
State is mutable and managed within a component, while props are immutable and passed to a component from its parent.
State is used for internal component data, and props are used for communication between components.
Why should we not update the state directly?
setState() or useState() to ensure proper rendering and component lifecycle management.Is the state updated synchronously?
setState(), React batches state updates for performance reasons and may batch multiple updates together.What is the use of refs?
How to create refs?
React.createRef() API in class components or using the useRef hook in functional components.How to prevent child component from re-rendering?
shouldComponentUpdate method or can use pure components in the case of class components. In functional components, we can make use of React.memo hook.What would be the common mistake of function being called every time the component renders?
You need to make sure that function is not being called while passing the function as a parameter.
render() {
// Wrong: handleClick is called instead of passed as a reference!
return <button onClick={this.handleClick()}>{'Click Me'}</button>
}
What is React.memo function?
PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.React.memo VS useMemo
React.memo is a higher-order component used for memoizing functional components to prevent unnecessary re-renders.
useMemo is a hook used for memoizing values in functional components to avoid redundant calculations.
How do you memoize a component?
React.memo by wrapping the component with it.What is Virtual DOM?
How does Virtual DOM work?
The Virtual DOM works by creating a tree of JavaScript objects that represent the structure of the actual DOM. Each object in the tree represents a DOM element, and contains information about its type, attributes, and children. When a component’s state changes, React creates a new Virtual DOM tree that reflects the new state of the component.
React then compares the new Virtual DOM tree to the previous Virtual DOM tree, and identifies the minimum number of changes needed to update the actual DOM to match the new Virtual DOM tree. This process is called “reconciliation”.
Once React has identified the changes that need to be made to the actual DOM, it updates the DOM in a batched process, minimizing the number of actual DOM manipulations that need to be performed.
The Virtual DOM allows React to update the UI in an efficient and performant way, without requiring developers to manually manipulate the actual DOM. By minimizing the number of actual DOM manipulations, React can provide a smoother and more responsive user experience, especially for complex and dynamic UIs.
What is the difference between Shadow DOM and Virtual DOM?
Shadow DOM is a web standard for encapsulating and styling components, often used in web components.
Virtual DOM is a concept specific to React for optimizing DOM updates by using a lightweight in-memory representation.
What is React Fiber?
What is the main goal of React Fiber?
What are the different phases of component lifecycle?
What are the lifecycle methods of React?
componentDidMount, componentDidUpdate, componentWillUnmount, and others. However, many of them are deprecated in recent versions in favor of hooks.What are Higher-Order components?
How to fetch data with React Hooks?
useEffect hook in combination with functions like fetch, axios, or other AJAX libraries.What is context?
What is children prop?
children prop is a special prop in React that allows you to pass components or elements as children to a parent component. It is often used for creating reusable and flexible components.What is reconciliation?
How do you conditionally render components?
if statements and ternary operators, to determine whether a component should be rendered or not.What are error boundaries in React v16?
What are hooks? React hooks rules
What is Lifting State Up in React?
What are fragments? Why are fragments better than container divs?
What is Flux?
What is Redux?
Redux is a predictable state container for JavaScript apps, most commonly used with React. It provides a centralized store for managing the state of your application, and provides a set of rules and patterns for updating that state in a predictable way.
The core concept of Redux is that the state of your application is stored in a single object called the “store”. The store is responsible for managing the state of your application, and provides methods for updating that state in a predictable way. The state of the store can only be modified by dispatching “actions”, which are plain JavaScript objects that describe the changes that should be made to the state.
When an action is dispatched, it is passed to a “reducer”, which is a pure function that takes the current state of the store and the action, and returns a new state. The reducer is responsible for updating the state of the store in response to the action.
Redux also provides a set of middleware that can be used to extend the functionality of the store. Middleware can be used for things like logging, asynchronous actions, and more.
What hooks does Redux have?
useSelector and useDispatch for interacting with the Redux store in functional components.What are the core principles of Redux?
What are the downsides of Redux compared to Flux?
Can I dispatch an action in a reducer?
How to access Redux store outside a component?
store.getState() method provided by Redux.What is the difference between React context and React Redux?
Should I keep all component’s state in the Redux store?
What is the proper way to access the Redux store?
useSelector hook or the connect function provided by React Redux.What is an action in Redux?
type property and may contain additional payload.What is the purpose of the constants in Redux?
How do you create a functional component in React with TypeScript?
You can create a functional component by defining a function that returns JSX. For example:
const MyComponent: React.FC = () => {
return <div>Hello, React!</div>;
};
How can you handle form input in React with TypeScript, and how do you type input event handlers?
React.ChangeEvent<HTMLInputElement>.Explain the useState hook in React and how you can define its type with TypeScript.
useState allows functional components to manage state. You can define its type using TypeScript generics, such as useState<number>(0).Explain how to work with external libraries and non-TypeScript code in a React TypeScript project.
How can you define prop types with default values in React TypeScript components?
What is React’s synthetic event system, and how do you type event objects in TypeScript?
React.MouseEvent.What are the advantages of using TypeScript with React over regular JavaScript?
Explain the role of the key prop in React, and how can you type it with TypeScript?
key prop helps React identify elements in lists. You can type it using TypeScript as key?: React.Key.What are the benefits of using TypeScript’s strict mode in a React project, and how do you enable it?
How can you use TypeScript’s “strictNullChecks” option to improve code quality in a React TypeScript project?
What are Styled Components?
Give an example of Styled Components
Lets create <Title> and <Wrapper> components with specific styles for each.
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
These two variables, Title and Wrapper, are now components that you can render just like any other react component.
<Wrapper>
<Title>{'Lets start first styled component!'}</Title>
</Wrapper>
Is it recommended to use CSS In JS technique in React?
What is React Router?
useHistory, useLocation, and useParams for managing routing-related functionality.How React Router is different from history library?
window.history with its browser and hash histories. It also provides memory history which is useful for environments that don’t have global history, such as mobile app development (React Native) and unit testing with Node.What is the use of react-dom package?
What is the difference between React and ReactDOM?
react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes. You can think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render(), and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup().Why ReactDOM is separated from React?
react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
To build more environments that React can render to, React team planned to split the main React package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.What is the purpose of render method of react-dom?
How events are different in React?
What are synthetic events?
stopPropagation() and preventDefault(), except the events work identically across all browsers.How do you pass an event handler to a component?
You can pass event handlers and other functions as props to child components. It can be used in child component as below.
<button onClick={this.handleClick}>
How to programmatically trigger click event in React?
ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as a class property, then use that reference to later trigger a click from your event handlers using the HTMLElement.click method.ref in render method:
<input ref={(input) => (this.inputElement = input)} />
click event in your event handler:
this.inputElement.click();
What are the Pointer Events supported in React?
How to bind methods or event handlers in JSX callbacks?
.bind() or public class fields syntax approach considering performance.What is the purpose of the useLayoutEffect hook?
useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations. It is often used for measuring and synchronizing layout.What is the purpose of the useImperativeHandle hook?
Explain the concept of the useDebugValue hook.
useDebugValue is used to display a label for custom hooks in React DevTools.What is strict mode in React?
React.StrictMode is a useful component for highlighting potential problems in an application. Just like <Fragment>, <StrictMode> does not render any extra DOM elements. It activates additional checks and warnings for its descendants. These checks apply for development mode only.Why do we use arrow functions in React and what problem do they solve?
this keyword works differently in arrow functions. They do not bind their own this, instead, they inherit one from the parent scope, which is called “lexical scoping”. If we didn’t use arrow functions, we would need to bind this to the parent, which is normally done in the constructor.What are keys in React and why do we need them?