How to pass numbers to React component?

  • Wrap the number in quotes as a string
  • Use the Number() constructor
  • Use the parseInt() or parseFloat() functions
  • Pass the number directly as a prop
To pass a number to a React component, you can simply pass the number directly as a prop. React will automatically handle the conversion of the number to a string when rendering the component. For example, you could pass a number like this: ' '. If you need to pass a number as a string, you can wrap it in quotes like any other string.

Why we need to be careful when spreading props on DOM elements?

  • It can cause security issues
  • It can cause the component to render incorrectly
  • It can spread invalid HTML attributes
  • It causes a performance issue
When spreading props on DOM elements, it is important to be careful because it can spread invalid HTML attributes. This can cause the component to render incorrectly or even create security vulnerabilities. It is recommended to only spread props on components that you trust, or to manually whitelist the valid attributes.

How to test React Native apps?

  • Use the Jest testing framework
  • Manually test the app on a device or emulator
  • Use the Mocha testing framework
  • There is no way to test React Native apps
To test React Native apps, you can use the Jest testing framework. Jest is a JavaScript testing framework that is widely used in the React and React Native communities. Jest provides a range of features for testing React Native apps, including snapshot testing, mocking, and coverage reports.

How to debug your React Native app?

  • Use console.log() statements
  • Use the React Native Debugger tool
  • Use the Chrome DevTools
  • There is no way to debug React Native apps
To debug your React Native app, you can use the React Native Debugger tool. This is a standalone debugging tool that provides a range of features for debugging React Native apps, including console logging, breakpoints, and network inspection. The React Native Debugger tool can be used with both iOS and Android devices and emulators.

What is React PropType array with shape?

  • A way to validate a string with a specific shape
  • A way to validate an array of objects with a specific shape
  • A way to validate an array of values with a specific shape
  • A way to validate an object with a specific shape
The "shape" propType in React allows you to validate an object with a specific shape, while the "arrayOf" propType allows you to validate an array of values. The "arrayOf" propType can be combined with the "shape" propType to validate an array of objects with a specific shape. This is useful for validating data structures in React components.

Why we need to pass a function to setState()?

  • To avoid infinite loops
  • To ensure proper synchronization of state updates
  • To handle errors gracefully
  • To improve performance
In React, we need to pass a function to the "setState" method in order to avoid infinite loops. If we pass an object directly, it can cause the component to re-render and update the state endlessly. By passing a function, we can ensure that the state is updated correctly and avoid these issues.

What are hooks?

  • Functions that let you "hook into" React state and lifecycle features from functional components
  • Functions that let you modify the DOM directly from React components
  • Functions that let you render custom elements in React
  • Functions that let you create reusable UI components in React
Hooks are functions that allow developers to "hook into" React state and lifecycle features from functional components. This means that functional components can now have state and lifecycle methods, making them more powerful and flexible. Hooks were introduced in React 16.8 and have since become a popular way of managing state and adding behavior to functional components.

How do you pass arguments to an event handler?

  • By using the event object
  • By using arrow functions
  • By using the bind() method
  • By using the apply() method
In React, arguments can be passed to an event handler by using arrow functions. Arrow functions allow parameters to be passed to the function when it is called, rather than when it is defined. This allows event handlers to receive arguments without causing unnecessary re-renders.

What is the difference between Shadow DOM and Virtual DOM?

  • Shadow DOM is a browser feature, while Virtual DOM is a React feature
  • Shadow DOM is used for server-side rendering, while Virtual DOM is used for client-side rendering
  • Shadow DOM is used for styling and encapsulation, while Virtual DOM is used for performance optimization
  • There is no difference
Shadow DOM and Virtual DOM are two different concepts. Shadow DOM is a browser feature that allows developers to encapsulate styles and markup within components. Virtual DOM, on the other hand, is a React feature that allows for performance optimization by minimizing changes to the actual DOM.

Why should we not update the state directly?

  • It can cause memory leaks
  • It can cause race conditions
  • It can cause the application to crash
  • It can cause the component to re-render
In React, state should not be updated directly because it can cause the component to re-render improperly. Instead, the setState method should be used to update state, which triggers a re-render of the component and ensures that the updated state is properly reflected in the UI.