React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
JSX (JavaScript XML) is a syntax extension for JavaScript, recommended to use with React to describe what the UI should look like.
React components have a state object, and when the state changes, the component re-renders.
The virtual DOM is a lightweight copy of the real DOM. React uses it to improve performance by minimizing direct manipulation of the actual DOM.
A React component is a reusable, self-contained module that renders a portion of the UI.
props in React?
props (short for properties) are used to pass data from a parent component to a child component.
Lifting state up means moving the state to a higher-level component, allowing multiple child components to share the same state.
Lifecycle methods include componentDidMount, componentDidUpdate, and componentWillUnmount, among others.
componentDidMount.
componentDidMount is invoked immediately after a component is mounted. It is suitable for actions that require the DOM to be fully constructed.
React uses synthetic events to normalize browser-specific events, making it consistent across different browsers.
shouldComponentUpdate?
shouldComponentUpdate is used to let React know if a component's output is affected by the current change in state or props, and whether it should re-render.
State is internal and controlled by the component, while props are external and passed to the component.
Context provides a way to pass data through the component tree without having to pass props manually at every level.
In a controlled component, the form data is handled by the React component's state.
Redux is a state management library for JavaScript applications, especially useful for managing the state of larger applications.
Hooks are functions that let you use state and other React features in functional components.
useState hook.
useState is a hook that adds state to functional components.
useEffect hook work?
useEffect is used to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
React Router is a standard library for routing in React applications.
React Router provides components like BrowserRouter and Link to implement client-side routing.
You can use fetch or third-party libraries like Axios to make API calls in React.
Async/await is used for handling asynchronous operations in a more readable and synchronous-like manner.
React uses a controlled component approach to handle forms, where form elements are controlled by state.
onChange in a form input?
The onChange event is triggered when the value of an input element changes, allowing you to capture and handle the new value.
You can use inline styles, CSS stylesheets, or CSS-in-JS libraries like styled-components.
CSS-in-JS is an approach where styles are defined directly within JavaScript files using a library like styled-components.
Jest is a JavaScript testing framework commonly used for testing React applications. It is often paired with Enzyme for component testing.
Snapshot testing involves capturing the rendered output of a component and comparing it with a stored "snapshot" to identify any unexpected changes.
Techniques include using the React.memo higher-order component, implementing shouldComponentUpdate, and code splitting.
Lazy loading is a technique where components or assets are loaded only when they are needed, improving initial page load times.
useReducer hook.
useReducer is used for managing more complex state logic in a more organized way.
useContext hook?
useContext is used to access the value of a React context directly within a functional component.
A Higher-Order Component is a function that takes a component and returns a new component with additional props or behavior.
HOCs are used for code reuse, abstraction of state or behavior, and adding additional functionality to components.
You can use error boundaries (using componentDidCatch lifecycle method) to catch JavaScript errors.
withRouter HOC.
withRouter is a higher-order component provided by React Router that wraps a component and gives it access to the router's props.
You can use createContext, Provider, and Consumer to create a context and share state between components without prop drilling.
Middleware is a way to extend Redux's functionality, often used for handling asynchronous actions.
Redux Thunk is middleware that allows action creators to return functions instead of plain action objects, enabling asynchronous actions.
Keys are used to give each element in a list a stable identity, helping React identify which items have changed, been added, or been removed.
Using indexes as keys can lead to issues when reordering or modifying the list. React may not correctly identify which item has changed.
PureComponent performs a shallow comparison of state and props, avoiding unnecessary renders when they haven't changed.
Use React.memo, useCallback, and useMemo to memoize components, functions, and values to avoid unnecessary re-renders.
TypeScript is a superset of JavaScript that adds static typing. It can be integrated into React projects to provide better tooling and type safety.
With TypeScript, PropTypes are not needed, as TypeScript provides static type checking.
MobX, Recoil, and Zustand are some alternative state management libraries.
Server-side rendering involves rendering React components on the server side and sending the fully rendered page to the client.
Libraries like Next.js provide built-in support for server-side rendering in React applications.
Use HTTPS, avoid using dangerous libraries, sanitize user inputs, and follow secure coding practices.
Use libraries like DOMPurify to sanitize user inputs and avoid rendering untrusted content as HTML.