React Flashcards
What is the difference between the DOM and the virtual DOM? Why would we use a virtual DOM?
The virtual DOM is maintained in the runtime environment.
The DOM is maintained in the browser.
The virtual DOM is basically a copy of the DOM. We used this copy to make updates and changes and then when we need to we can update the DOM to reflect these changes. This reduces the amount of computational power needed to run a responsive web app because we don’t need to continuously render everything.
React is a library and AngularJS is a framework. What are the differences between a library and a framework?
Libraries allow you to access a number of useful functionalities however you need to manage their interaction with your code and the management of data flow yourself.
Frameworks are for the most part in charge of the data flow. There are specific places you must ‘plug in’ your code for it to work correctly.
What is one way data binding?
One way data binding is when changes to the model are reflected in the view but changes to the view are not reflected in the model. React uses one way data binding.
What is two way data binding?
Two way data binding is when changes to the model are reflected in the view and changes to the view makes changes to the model.
How does React make webpages more responsive?
React creates a virtual DOM so we don’t have to directly manipulate the DOM which is slower. It uses algorithms to only make the most efficient changes to the DOM.
What element do you usually attach a React hook to?
You usually attach a React Hook to the ‘root’ element of a HTML file.
What is the naming convention of a React component?
Components must be named with a capital letter.
How do we add a state to a component that is saved between renders?
We can use the ‘usestate’ keyword to add a local state to a component that is preserved between renders.
e.g useState();
What is good practice to check in a promise?
It is good practice to check if a promise has fulfilled and then add a catch if it has not.
Why do we want to use hooks in react?
React hooks allow us to use state and lifecycle features.
Write an example React function that initialises a count value to 0 and updates it by 1.
function Example() {
const [count, setCount] = useState(0);
setCount(count + 1)
}What are the 3 stages of a react component lifecycle?
- Mounting - creating a component and inserting it into the DOM.
- Update - changes to props or state cause a render/
- Unmount - A clean up process that is called to remove a component from the DOM.
What are the benefits of single page applications?
- They load much faster.
- They only render as needed.
- Caching allows for storage of local data
Why is React routing useful?
React routing is used to make navigational components for single page applications without having to refresh the page every time a user navigates.
