React.js Questions Flashcards
What is useState?
useState is a React Hook that allows you to add state to functional components.
What does useState return?
An array where the first element is the current state value and the second element is a function to update that state.
What happens when setCount(newCount) is called?
The component will re-render with the new state value.
What occurs when a component receives new props?
The component will re-render.
What is React’s reconciliation process?
React compares new props to previous ones, and if there’s a difference, the component is updated with the new data.
How can you share state between multiple components?
By lifting the state up to a common parent component or using Context API or a state management library like Redux.
Is JSX mandatory to use React?
No, JSX is not mandatory.
How can you define components without JSX?
By writing JavaScript that uses React.createElement().
What is a controlled component?
A component where form data is handled by React state.
What is an uncontrolled component?
A component that manages its own state internally, and React doesn’t control the form data.
What is the Virtual DOM?
An in-memory representation of the actual DOM.
How does the Virtual DOM improve performance in React?
It allows React to update the UI efficiently by comparing the new VDOM with the previous one.
What are some common pitfalls when doing data fetching?
- Not handling errors properly
- Forgetting to cancel requests when a component unmounts
- Not managing loading states
- Making repeated requests unnecessarily
- Incorrectly handling asynchronous data
What is useEffect used for?
To perform side effects in a functional component.
What are some pitfalls of useEffect?
- Forgetting to add dependencies
- Using it for synchronous operations
- Overcomplicating logic within one effect
What are the advantages of using React?
- Component-based architecture
- Virtual DOM for improved performance
- Large ecosystem of tools and libraries
- Backed by Facebook
What is the difference between functional components and class components?
Functional components are simpler functions, while class components are ES6 classes that extend React.Component.
How does React’s reconciliation process work?
React compares the current Virtual DOM with the previous one to identify changed elements and applies minimal changes to the real DOM.
What are hooks in React?
Functions that allow you to hook into React’s state and lifecycle features from functional components.
What is useReducer and when would you use it?
useReducer is a hook for managing complex state logic and is useful for multiple interdependent state variables.
How do you manage form state in React?
Using controlled components where input values are tied to the component’s state or using uncontrolled components with refs.
What is the purpose of keys in React lists?
To help React identify which items in a list have changed, added, or removed.
How do you pass data from a child to a parent component in React?
By passing a callback function as a prop to the child, which the child calls to send data back.
What is React.memo?
A higher-order component that prevents unnecessary re-renders by memoizing the component output based on props.
What is the use of useMemo?
To memoize the result of an expensive calculation to avoid recalculating it on every render.
What are error boundaries in React?
Components that catch JavaScript errors in their child component tree and prevent the entire tree from crashing.
What is React and how can you best describe it?
React is a JavaScript library used to build user interfaces, particularly for single-page applications where dynamic content changes frequently. It allows developers to build web apps that are fast and interactive. React follows a component-based architecture, meaning the UI is broken down into smaller, reusable pieces called components. React’s main strength lies in its ability to efficiently update and render the right components when data changes, through its virtual DOM and one-way data flow.
What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript, commonly used in React to describe what the UI should look like. JSX allows you to write HTML-like code inside JavaScript, which React then converts into actual HTML during the rendering process. It’s not required to use React, but it makes the code more readable and intuitive by combining JavaScript logic and HTML-like syntax.
What is the virtual DOM and how is it used by React?
The virtual DOM is a lightweight representation of the actual DOM. React uses the virtual DOM to keep track of changes in the UI in memory before they are reflected in the real DOM. When the state of a component changes, React first updates the virtual DOM, compares it with the previous version, and then updates only the parts of the actual DOM that changed. This process makes React apps more efficient and faster.
What are some of the advantages of using the virtual DOM?
Improved performance: By only updating the parts of the DOM that have changed, React reduces unnecessary rendering and improves performance.
Efficient updates: React’s reconciliation algorithm (diffing algorithm) helps in quickly determining what needs to be updated, resulting in faster re-renders.
Decoupling of UI and logic: The virtual DOM allows React to handle the updates automatically, leaving developers to focus on the application’s logic
What are some of the disadvantages of using the virtual DOM?
Memory overhead: The virtual DOM itself requires memory and resources, which can add overhead to the app, especially for very large and complex applications.
Initial learning curve: The concept of the virtual DOM can be difficult for beginners to grasp.
Not a silver bullet: While the virtual DOM improves performance, it doesn’t solve all performance problems. Complex apps may still experience performance issues that need further optimization.
What is the difference between controlled and uncontrolled components?
Controlled components: In controlled components, the state of the input element is controlled by React state. The value of the input is set by the state and updated through events like onChange.
Uncontrolled components: In uncontrolled components, the form element manages its own state internally. React doesn’t control the value of the input element. You can access the value via a ref.
What is a React hook?
A React hook is a special function that lets you “hook into” React features like state and lifecycle methods in function components. Hooks allow you to use state, side effects, and other features without writing class components.
What are some of the hooks commonly used in React?
useState: Allows you to add state to functional components.
useEffect: Lets you perform side effects (like data fetching) in your components.
useContext: Allows you to access the context values in your components.
useRef: Allows you to persist values across renders without causing re-renders.
useMemo: Memoizes the result of a computation to avoid recalculating on every render.
useCallback: Returns a memoized version of a callback function to prevent unnecessary re-creations of the function.
When it comes to performance in React, what do you need to look out for?
Excessive re-renders: Minimize unnecessary re-renders by using memoization (e.g., useMemo and useCallback), React.memo, and shouldComponentUpdate.
Large component trees: Use techniques like code-splitting, lazy loading, and virtualization (for large lists) to improve performance.
State management: Ensure that the app’s state is organized well and avoid passing down props through too many layers (use context or state management libraries).
What is useMemo and how does it work?
useMemo is a hook that memoizes a value, meaning it only recomputes it when one of its dependencies changes. This can improve performance by avoiding expensive recalculations on every render.
What is useCallback and how does it work?
useCallback is a hook that memoizes a callback function so that it doesn’t get recreated on every render unless one of its dependencies changes. It helps prevent unnecessary re-renders of components that depend on the callback.
What is useRef and how does it work?
useRef is a hook that creates a persistent reference to a DOM element or a value that does not cause re-renders when updated. It can be used for accessing DOM nodes or storing mutable values across renders without triggering re-renders.
How does useRef differ from useState?
useRef: Stores a reference to a value or DOM element that doesn’t trigger a re-render when updated.
useState: Stores a value that triggers a re-render when updated.
What is Context and how does it work?
React Context allows you to share values (like themes, authentication info, etc.) between components without explicitly passing props down through every level of the component tree. It uses a Provider to pass the value and a Consumer to access it.
What is state management and when is it useful?
State management is the practice of managing and storing state (data) in an application. It becomes especially useful when the state needs to be shared or updated across multiple components. It’s essential for complex applications where state is used in many places and needs to be synchronized.
What are some examples of state management libraries?
Redux: A popular library for managing state globally in large React applications.
Recoil: A new state management library for React that aims to provide a simpler and more flexible API. MobX: A state management library that uses observables and reactions to automatically update components. Context API: Built into React, this is useful for small to medium-sized apps where you don't want the complexity of libraries like Redux.
What is the recommended way to structure your React code?
A good structure might look like:
/src: Main folder for the application.
/components: Reusable components.
/hooks: Custom hooks.
/context: Context providers.
/pages: Components representing pages.
/services: API calls or utilities.
/assets: Static files like images, fonts, etc.
What are some best practices for writing React code?
Keep components small and focused: Each component should have a single responsibility.
Use functional components and hooks: Avoid class components where possible.
Use prop types or TypeScript: Ensure the types of props passed to components are validated.
Write tests: Use testing libraries like React Testing Library to ensure your components work correctly.
Optimize performance: Use React.memo, useMemo, useCallback, and lazy loading where appropriate.
What are the React dev tools and what can you use them for?
React DevTools is a browser extension that provides an interface for inspecting and debugging React applications. You can use it to:
Inspect the component tree. View component state and props. Profile performance to identify slow components.
What is a good way to test your React applications?
A good way to test React applications is using tools like:
Jest: A JavaScript testing framework for running unit tests. React Testing Library: A testing utility that encourages testing React components the way users interact with them. Cypress: A tool for end-to-end testing of web applications.
