React - Basic Flashcards
What are the key features of React.js?
- a virtual DOM for efficient rendering,
- component-based architecture,
- JSX syntax for defining components,
- and unidirectional data flow.
What is unidirectional data flow in react?
- Data flows only 1 way from parent to child using props
- If a child needs to change the state it does so via a callback passed down by the parent.
- Using the callback will update the parent components state and cause the parent and subsequent child components to re-render.
What is JSX?
-A syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files.
Explain the concept of virtual DOM in React.js.
A lightweight copy of the real DOM which allows React to efficiently update and render only the necessary components when there are changes
What is a functional component
JavaScript functions that receive props as input and return JSX elements as output.
What are class components
Now are considered a little bit out dated compared to functional components. They extend the React.Component class and have the lifecycle methods.
What is the purpose of state in React?
- State is used to store and manage data that can change over time within a component.
How do you update state in React?
- You should never update state directly.
- Functional components should use the useState react hook’s setter method to updated the state.
- Class components should use the setState() method to update state.
What are controlled components in React?
- Where the values of form elements are controlled by React state.
What is the significance of keys in React lists?
Used to help React uniquely identify and differentiate between elements in an array of components.
What is React Router?
- A popular routing library for React applications.
- It allows you to define different routes and their corresponding components, enabling navigation and rendering different components based on the URL
What is the purpose of the useEffect hook in React?
- The useEffect hook is used to perform side effects in functional components such as making API calls.
What is the purpose of the useContext hook?
- It provides a way to access values that are globally available to all components within a specific context.
What is the purpose of the useCallback hook?
- Used to return memoized versions of functions in React so that a function is only reloaded when one of the useCallback dependencies has changed.
What is the purpose of the useRef hook?
Allows you to create a mutable reference that persists across renders and doesn’t cause a re-render when it’s value changes.
It is commonly used to access or store DOM elements without triggering a re-render.
What is the significance of the Fragment component in React?
- It is a built-in component provided by React.
- It allows you to group multiple elements without adding an extra DOM element.
- It helps in avoiding unnecessary wrappers in the component hierarchy.
How can you optimize performance in React applications?
- Using key props correctly,
- implementing shouldComponentUpdate or React.memo / React.useCallback,
- code splitting using import with React.lazy (Lazy loading a component only when it’s needed),
- using production builds,
Explain the concept of React Hooks.
Functions that make it possible to use state and handle side effects in Functional Components in place of Class Components.
What is Redux?
A state management library for JavaScript applications. .
What are React Portals?
- Provide a way to render a component like a Modal in a different part of the DOM tree outside of the parent component’s hierarchy using the createPoral function that recieves the JSX that you’d like to render and the element that you’d like to be the parent of the JSX.
How can you handle errors in React?
This is something that is easier to do with Class Components because functional components cannot capture errors during rendering.
You create something called an ErrorBoundary class that wraps a component and then use the getDerivedStateFromError and componentDidCatch lifecycle methods to essentially catch any errors that occure with that components hierarchy.
This limits the impact of those errors so that the whole application doesn’t fail.
What are Higher-Order Components (HOCs) in React?
They take a component as a prop input, they wrap that component in reusable functionality and return it as a now enhanced component.
How can you handle events in React?
attaching event handlers such as onClick, to JSX elements.
How do “keys” help React to more efficiently render lists of components?
When the state or props change, react will compare the new list of keys to the old list and determine the differences so as to minimize unnecessary re-renders.
How do “keys” help react to preserve component state?
They help react to understand which components have changed, been added or removed.
