React Deck 4 Flashcards
What are Higher OrderComponents(HOC)?
Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.
What are Pure Components?
Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.
What is the significance of keys in React?
Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.
What were the major problems with MVC framework?
Following are some of the major problems with MVC framework:
DOM manipulation was very expensive
Applications were slow and inefficient
There was huge memory wastage
Because of circular dependencies, a complicated model was created around models and views
What is React Router?
React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.
Why is Switch component used in React Router v4?
Although a <div> is used to encapsulate multiple routes inside the Router. The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.</div>
Why do we need a Router in React?
A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any ‘route’ defined inside the router, then the user is redirected to that particular route. So basically, we need to add a Router library to our app that allows creating multiple routes with each leading to us a unique view.
List down the advantages of ReactRouter.
Few advantages are:
Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component () in which we enclose the specific child routes ().
No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the component.
The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.
How is React Router different from conventional routing?
PAGES INVOLVED Conventional Routing - Each view corresponds to a new file React Routing Only single HTML page is involved
URL CHANGES Conventional Routing - A HTTP request is sent to a server and corresponding HTML page is received React Routing Only the History attribute is changed
FEEL Conventional Routing - User actually navigates across different pages for each view React Routing User is duped thinking he is navigating across different pages
What is React.memo ?
React. memo is a higher order component. If your component renders the same result given the same props, you can wrap it in a call to React. memo for a performance boost in some cases by memorizing the result. This means that React will skip rendering the component, and reuse the last rendered result
