Back to notes
Describe a scenario where the state might be directly mutated and the potential issues this can cause.
Press to flip
Directly mutating state can lead to unexpected bugs and inefficient re-renders since React needs to detect state changes to update the component properly. State should be updated immutably using the setter function returned by `useState`.
What syntax does React use that resembles HTML but allows embedding JavaScript?
JSX
Why should you use Fragments (`<> </>`) in React components?
Fragments allow you to group multiple elements without adding additional nodes to the DOM, keeping the DOM structure clean.
How is state managed in functional components using React hooks?
State is managed using the `useState` hook, which takes an initial state value and returns an array with the current state and a function to update it.
Can you explain the role of event handlers in React and how they interact with state?
Event handlers like `onChange` and `onClick` capture user interactions and are used to update state via the setter functions, triggering re-renders with the new state.
Give an example of how `useEffect` can be used to sync state with `localStorage`.
You can use `useEffect` to read from `localStorage` when the component mounts by specifying an empty dependency array, and to write to `localStorage` whenever the state updates by including the state variable in the dependency array.
What are props in React and how are they typically used?
Props are used to pass data and functions from parent to child components, facilitating communication and data sharing between components.
Why is it important to provide a unique `key` prop to list items in React?
Providing a unique `key` prop helps React efficiently update and re-render list items by tracking changes accurately, improving performance.
Why is managing props and state thoughtfully crucial in React development?
Proper management of props and state helps in avoiding unnecessary re-renders, prevents bugs, and ensures efficient performance of the application.
What is the importance of always returning a single element from a React component?
React components need to return a single element to maintain a predictable and structured DOM, which can be achieved by wrapping multiple elements in a parent element or a Fragment.
What are the benefits of breaking down the UI into smaller components in React?
It promotes reusability, maintainability, and simplifies the development process.
How does breaking down a search bar and product list into individual components improve code maintainability?
It keeps the code organized and modular, making it easier to manage, update, and reuse individual parts without affecting the entire UI.
Explain the difference between imperative and declarative programming in the context of React.
Imperative programming involves writing step-by-step instructions, while declarative programming involves describing the end result and letting React handle the steps to achieve that result.
What does it mean to 'think declaratively' when developing with React?
Thinking declaratively means focusing on the desired outcome or state of the UI and letting React manage the how-to of achieving that state.
What is the purpose of the `useEffect` hook in React?
The `useEffect` hook is used to handle side effects in function components, such as fetching data, updating the DOM, or syncing with external systems, and runs on component mount and update when dependencies change.
Previous
Next