React Flashcards
What is React?
React is an frontend JavaScript library for building user interfaces based on UI components.
What are advantages of React?
- Virtual DOM, reusable components, can be used both on the client and server side (NextJS).
Explain Flux.
Flux is an architectural pattern that enforces uni-directional data flow. Provides stability and reduces runtime errors.
What is the purpose of render()?
Every React component must have a render(). It returns a single React element (multiple HTML elements wrapped in a <div> or , etc.). render() must be kept pure, and return same thing each time it is invoked.</div>
What are React Hooks and their advantages?
Hooks allow you to use state, and other features without having to write a class. They allow reusability and extraction of stateful logic. React Hooks replace life cycle methods. (useEffect()).
What are the phases of life cycle methods and their class functions?
Initialization
Mounting (componentWillMount())
Updating (componentDidUpdate())
Un-mounting (componentWillUnmount())
What happens in each phase of life cycle methods?
Initialization: React component prepares setting up initial state and props.
Mounting: When our component is created.
Updating: When our component is updated.
Un-mounting: When our component is removed from the DOM.
Explain Controlled vs Uncontrolled Components.
Controlled Components takes it’s current value through props and handles change through callbacks like ‘onChange’.
Uncontrolled Components stores it’s own state internally, and query the DOM using a ‘ref’.
How does the Virtual DOM work?
The Virtual DOM is a lightweight representation of the real DOM. When state changes, the Virtual DOM changes only that object in the real DOM, rather than updating all the objects.
What is prop drilling? How can you avoid it?
Prop Drilling is when props is passed down from much higher components. It can be avoided with React Context (useContext hook), which is a provider that can give access to state for many components.
What do you like and dislike about React?
React offers unidirectional data flow from parent to child and is pretty much JavaScript (unlike Vue or Angular that have their own syntax). Dislike JSX.
What is the significance of having a key when rendering a list of elements?
What is a potential bug that you can introduce when using index as a key?
React compares elements under the hood to only re-render what has changed. React uses the key attribute to track changes in a list.
Using index as a key is an anti-pattern and can negatively impact performance of the order of the items change. For example, if we add a new item to the list in the beginning of the list, it will change the indices of the original elements in the list.
How does React.Context work?
React’s Context API helps avoid prop drilling. It allows you to share information (state) to any component by storing it in a central place and allowing access to any component that requests it.
Parent/App Component:
Import { createContext } from 'react'
const UserContext = createContext()
// App goes here
Child Component:
{value => *render something based on the context value}
Explain React.Context vs Redux.
React.Context is great if your goal is to just be able to pass state to any component. Redux is a lot of overhead.
Are React props immutable?
Yes. A component can only inherit props, but not mutate them. You’d have to “ask” the parent component to modify them, using a hook or a callback.
