React.js Flashcards
What is React and it’s key features?
A javascript library for building user interfaces.
Key features: virtual DOM, reusable components, unidirectional data flow
What is the React Virtual DOM and how does it work?
A virtual representation of a UI that is kept in memory after the initial render
Any changes are first made to the virtual DOM, then synchronized with the ‘real’ DOM in an efficient way (reconciliation)
Improves performance by only updating the parts that have changed
Describe unidirectional data flow
Data has a single, clear direction of movement throughout the application.
Ensures a predictable and easier-to-understand flow of data, making the application more maintainable and less prone to bugs.
Data Down - data is passed from parent to child
Action up - child doesn’t directly modify the state of its parent; instead, it informs the parent about the desired change
Explain JSX syntax
JSX is a syntax extension for javascript, allowing XML code
Facilitates the creation of react elements in a concise and readable manner
How does React handle data binding?
React uses one-way data binding - where any changes to the data trigger re-renders
What are React props?
Properties - inputs to components, allowing the passing of data from parent to child
Explain state in React
An internal data storage mechanism in React components, when the state changes the component re-renders
Why use key attribute in React lists?
Facilitates efficient updates by identifying which items have changed, been added, or removed.
Controlled vs Uncontrolled
Controlled
* state is controlled by react
* Using useState to manage an input value in order to do something else with it
Uncontrolled
* state is managed by the DOM
*Using useRef to track an input value but doing nothing with it in state
Significance of React Hooks?
Functions (built-in or custom) that allow functional components to use state and lifecycle features
Describe some built-in React Hooks
useState - manage local state.
useEffect - side effects like data fetching, subscriptions, or manually changing the DOM
useMemo - prevents unnecessary recalculations in functional components.
useContext - consume values from the React context without wrapping the component in a context consumer
useReducer - alternative to useState for managing more complex state logic. It is particularly useful when the next state depends on the previous state.
Explain the lifecycle method in a React component
- Mounting - component is created & inserted into the DOM
- Updating - component is re-rendered as a result of changes in props or state
- Unmounting - component is being removed from the DOM
Purpose of React Router?
Simplifies navigation in single-page applications by providing a set of components and hooks to manage routing and rendering based on the current URL
What is Redux?
State management library for larger JS applications
What is React Context?
Provides a way to pass data through the component tree without having to pass props manually at every level
Commonly used with themes, user authentication status, or any other global state across a React component tree
Explain HOC - Higher Order Components
Functions that take a component and return a new component with enhanced features, enabling code reuse and logic sharing
How does Error Handling work in React
Error boundaries catch JS errors anywhere in the component tree using the componentDidCatch method
What are Fragments in React?
Used to group multiple elements without introducing an additional parent element to the DOM
<></> uses empty angle brackets
Explain reconciliation in React?
The process by which React updates the DOM to match the virtual DOM efficiently
Explain how PropTypes work
Enforces the type of props passed to a component, providing runtime validation and documentation
What are Portals?
Allow rendering children into a DOM element that exists outside of the parent component
Function vs Class Components
Function - simple, stateless components introduced in React 16.8
Class - traditional, ES6 classes with state and lifecycle methods
Explain Memoization
Optimizing expensive function components by caching the result of a computation based on it’s inputs
For example, when displaying text to the user as they type into an input
How does Event Handling work
Attach event handlers using camelCase naming conventions (like onClick and onChange)
Treated as functions, allowing you to pass additional parameters and define custom behavior
How does React handle Forms and Controlled components?
Controlled components manage form state through state, and update the UI based on changes in the components state
Explain code-splitting
Breaking down a large chunk of JS code into smaller chunks and loading them on demand to enhance performance
Explain how Server-Side Rendering works
The browser sends a request to the server, which executes the component code, creating a virtual DOM, and generating HTML
The fully rendered HTML is sent back to the client
Pros: Improves performance, SEO friendly
Cons: State management, Increased server load
What are React Hook rules and why are they important?
- Only call them at the top level of functional components
- Do not use them inside loops or conditions.
Following these rules ensures the correct behavior of Hooks
What is React Flow?
Flow allows us to add type annotations to our code, specifying the types of variables, function arguments, and return values.
This helps catch type-related errors early in the development process before the code is even run.
How does React handle XXS (Cross-Site Scripting)
By using JSX to render content securely, preventing injection attacks by automatically escaping values before rendering.
