What are controlled components?

  • Components that are managed by React and cannot be updated directly
  • Components that are updated using refs
  • Components that are updated using the setState() method
  • Components that store their own state
Controlled components are components that store their state in a parent component and are updated using the setState() method. The parent component passes down the component's state as props and also passes down a function to update the state when needed. This approach allows for more control over the component's behavior and simplifies debugging.

How to add Google Analytics for react-router?

  • Use the "google-analytics" library with the "react-router-analytics" package
  • Use the "react-analytics" library with the "router-react-analytics" package
  • Use the "react-ga" library with the "react-router-ga" package
  • Use the "react-router-ga" library with the "google-analytics-react" package
In React, you can add Google Analytics for React Router by using the "react-ga" library with the "react-router-ga" package. This will allow you to track pageviews and events for your React Router pages in Google Analytics, and can be configured in the "index.js" or "App.js" files.

Do I need to rewrite all my class components with hooks?

  • Yes, it is recommended to use hooks over class components
  • No, you can continue to use class components if they are working for your project
  • It depends on the project requirements
React Hooks were introduced to provide an alternative way of managing state and lifecycle methods in functional components. However, class components are still fully supported in React, and you can continue to use them if they are working for your project.

What are the major features of React?

  • All the options
  • Component reusability
  • Server-side rendering
  • Virtual DOM
React has several major features, including a virtual DOM, server-side rendering, and component reusability. The virtual DOM helps improve performance by minimizing the number of updates needed to the actual DOM. Server-side rendering allows React to render components on the server before sending them to the client, improving performance and SEO. Component reusability allows developers to create reusable UI components using JavaScript. One-way data binding is not a major feature of React.

What are props in React?

  • A component's children
  • A component's internal data
  • A component's methods
  • A component's properties
In React, props (short for "properties") are a component's input data that are passed down from a parent component. Props are read-only and cannot be changed by the child component. Props are used to customize the behavior and appearance of a component.

What happens when an AngularJS expression contains a syntax error?

  • AngularJS automatically corrects the syntax error and continues execution.
  • The application continues to run, and the error is ignored.
  • The application throws an error, and the entire page crashes.
  • The error is logged to the console, and the affected expression is not evaluated.
When an AngularJS expression contains a syntax error, the application throws an error, and the entire page may crash. It is important to handle and fix syntax errors promptly to ensure the smooth functioning of the AngularJS application. Proper error handling is crucial for debugging and maintaining code integrity.

What is react-scripts?

  • A build tool for React applications
  • A testing framework for React applications
  • A code analysis tool for React applications
  • A runtime environment for React applications
react-scripts is a build tool that comes bundled with Create React App, a popular tool for creating React applications. react-scripts provides a set of preconfigured build scripts and development tools, such as Webpack and Babel, to simplify the process of setting up and running a React application.

How to re-render the view when the browser is resized?

  • Use a media query and conditional rendering
  • Use a ref and measure the size of the container element
  • Use a state variable and update it on resize
  • Use a window event listener and call forceUpdate()
In React, you can re-render the view when the browser is resized by using a state variable and updating it on resize. This will trigger a re-render of the component, and allow you to update the layout or other properties based on the new size of the browser window. You can use the "window.addEventListener" method to listen for the "resize" event, and update the state variable accordingly.

What is the purpose of getDerivedStateFromProps() lifecycle method?

  • To fetch data from an API
  • To handle events
  • To update the props based on state changes
  • To update the state based on props changes
The "getDerivedStateFromProps" lifecycle method in React is used to update the state based on changes to props. This method is called every time the component is updated and can return a new state object. It is commonly used to synchronize the state with the props in response to user input or server-side changes.

How to use TypeScript in create-react-app application?

  • Use the --typescript flag when creating the app
  • Add the typescript dependency and update the configuration files
  • Use the create-react-app-ts tool instead of create-react-app
To use TypeScript in a create-react-app application, you need to add the typescript dependency and update the configuration files. You can do this manually or by using a tool like react-scripts-ts. After installing the typescript dependency, you need to rename some files and update the configuration files to use TypeScript instead of JavaScript.

What is code-splitting?

  • A technique for optimizing React component performance
  • A way to split code into smaller, more manageable chunks
  • A method for separating HTML and CSS in a web application
  • A feature of React that enables components to be reused in multiple contexts
Code-splitting is a technique for splitting a large JavaScript bundle into smaller, more manageable chunks. This can improve the performance and load time of a web application by reducing the amount of code that needs to be downloaded and parsed by the browser. In React, code-splitting can be achieved using the dynamic import() method, which allows components to be loaded asynchronously at runtime.

What is the recommended approach of removing an array element in react state?

  • Use the filter() method
  • Use the map() method
  • Use the slice() method
  • Use the splice() method
In React, the recommended approach for removing an element from an array in state is to use the "filter()" method. This allows you to create a new array that contains all the elements of the original array except the one you want to remove. This is a safer and more efficient approach than using the "splice()" method, which mutates the original array and can cause unexpected side effects.