React Flashcards
How do you create refs in React
You can create refs in React using React.createRef(). Refs provide a way to access the DOM directly or interact with a child component, you can access its underlying DOM node or React instance by referencing the current property of the ref
How often does the React useState update? Why?
The useState hook in React updates asynchronously, meaning it does not update the state immediately. React batches multiple state updates to optimise performance and minimise unnecessary re-renders. This helps React handle large-scale applications efficiently. The state updates occur on the next render, ensuring consistency across the application.
Name 3 advantages of using React Hooks
Improve Readability: Hooks make components easier to read and maintain by reducing complexity.
Reusability: Hooks allow sharing stateful logic between components without having to deal with higher-order components or render props
Side-Effect Management: Hooks like useEffect allow for clean and controlled side-effect handling in functional components
Name 2 advantages of using React.js
Component-based architecture: React allows developers to build encapsulated components that manage their own state, making the UI more reusable and easier to maintain.
Virtual DOM: React uses a virtual DOM to optimise rendering performance by minimising direct manipulation of the real DOM, leading to faster updates.
Outline the different stages of the React.js lifecycle
- Mounting: This is when the component is being inserted into the DOM
- Updating: This happens when the component’s state or props change, causing a re-render
- Unmounting: This occurs when the component is being removed from the DOM
What happens if you attempt to update the state directly?
If you attempt to update the state directly, React will not detect the change and will not re-render the component. State should only be updated using setState() (in class components) or the useState setter function (functional components)
Explain whether Hooks replace higher-order components
Hooks don’t replace higher-order components (HOCs), but they provide an alternative for sharing logic between components. Hooks like defect and useState allow functional components to manage state and side effects without needing HOCs or render props, which can make the component tree cleaner and easier to follow
Which method would you use to handle events in React?
In React, events are handling by passing functions as event handlers in JSX. The event handler methods are named using camelCase (e.g. onClick, onSubmit), and a function is passed to handle the event instead of a string
Which method would you use to add attributes to components conditionally?
You can add attributes conditionally using JavaScript expressions in JSX. For example, you can use ternary operators or logical && to conditionally add classes or attributes
In which situation would you use useMemo() in React?
When you want to memorise expensive computations and avoid recalculating them on every render. useMemo() caches the result of a function and only recomputes it if the dependencies change, thus improving performance by reducing unnecessary renders.
Explain what useState is
useState is a hook in React that allows functional components to have local state. It returns a state variable and a setter function to update the state.
Explain what an event is in React
An event in React is an interaction triggered by user input, such as clicks, typing, or scrolling.
What is a component?
A component is a building block in React used to create UIs. It takes inputs (props) and returns a React element to at describes how a section of the UI should appear.
What is the difference between class and functional components?
Class components are stateful and can use lifecycle methods, while functional components are stateless by default but can use hooks (like useState and useEffect) to manage state and lifecycle events. Functional components are generally simpler and have better performance when hooks are used.
Why are function-based components preferred over class-based components in modern React development?
Function-based components have become more popular because they are more concise and easier to write compared to class-based components. They also support React hooks, which allow you to use state and other React features without the need for classes. Although older React project might still use class components, function-based components are now standard for new development.
