React Flashcards
What is React?
React is JavaScript library, developed by Facebook for buildig user interface. It allows developer to create separate reusable components.
What is JSX?
JSX is a syntaxical sugar over React components. It allows you to write HTML-like code, and then it will be converted into React elements.
How does React handle DOM manipulation?
React creates a Virtual DOM tree, which is representation of real DOM in form of JavaScript objects tree, and each time after React state changed, React compares old Virtual DOM and new Virtual DOM, and updates real DOM only in places where we have differences between new and old versions of Virtual DOM trees.
What is state in React?
State in React is an information container, where we can store information about current component data. We can create new state variable using React useState hook.This case we get an array, where first item is current state variable, and second is a function, using what we can change this variable value. When we change this variable value, component will be re-rendered.
What is property in React?
Property in React is readonly external value, which we can get inside component from its parent component as some kind of parameter. Any value, what we provide as attribute inside JSX component tag, will become property and will be accessible inside this one component props object.
What are some of the limitations of React?
React is a view-only library, which mean, that we can have certain problems with other aspects of an application, like styles management, or state management. And to solve these problems, we need to use another libraries which provide required functionality. For example, in default React all styles have global scope. So, if you want to have scoped styles, like you have in Vue, for example, you need to use additional instruments, which will do this for you. For example, in React framework Next.js we have inbuilt CSS modules support. So, with it, this is possible to make styles scoped.
What are React hooks?
React hooks are special functions which you can call inside your React functional components to get access to certain things, which you usually have in other frontend frameworks.
These features, for example, include state management, component lifecycle hooks, memoization and some other React-specific things.
For example, using useState hook, you can create a component-specific variable, which value will be acessible after this component will re-render.
Using useEffect hook, you can do certain actions when certain other variables or properties were updated.
Using useMemo, you can memoize certain information until this hook dependencies will be updated.
How do you handle errors in React?
In case if we want to catch error inside synchronous code of separate component, we can use regular try / catch block.
If we are talking about errors, what happened inside React internal mechanisms on render stage, then we need to use class component componentDidCatch method.
What are synthetic events in React?
Synthetic events are just regular events, wrapped with certain React-specific classes. They provide cross-browser interface for events.
In React, why do we need to use keys in lists?
Because React uses key property as unique identifier for elements. Using it, React can track components, and always exactly understand, what elements should be added, removed, or updated.
What are the rules for using hooks in React?
First of all, on every render must be called same number of hooks. So, this is highly not recommended to call hooks inside conditions or loops, because this case number of hooks will change from render to render.
That is also the reason why this is allowed to use hooks only inside functional components and other hooks, and not inside regular functions.
Finally, custom hooks names must start from “use” word.
What are lifecycle stages of React component?
There are three stages of lifecycle of React functional component.
First is mounting. On this stage component state is initialized, and all useEffect hooks are called once.
Second is updation. On this stage, are called all useEffects cleanup callbacks, then goes render, and finally, after render, are called all useEffects where any of their dependencies has changes.
Finally, unmounting. On this stage are called all useEffects cleanup callbacks, and then component is destroyed.
What is difference between useCallback and useMemo? And how they are usually used?
The difference is in how they work. useCallback takes a callback function as first argument, and array of dependencies as second argument, and returns one and same instance of this function until its dependencies are changed.
useMemo just returns result of provided callback execution, and recalculates it each time when its dependencies are updated.
Typically, useMemo is used when we need to optimize some calculations, which we don’t want to be executed on each render.
useCallback is used to keep one and same function instance between re-renders, which is useful if we use React components created using memo wrapper, or when we provide this function as one of items in dependencies array of other hooks.
What is reconciliation?
Reconciliation in React is a process of comparing old and new Virtual DOM trees, understanding of what should be updated, and then updating real DOM tree.
What is Flux architecture?
Flux architecture is a architecture of monodirectional data flow inside application.
It consist of few parts, which are View, Actions, Dispatcher and State.
Store contains information about current application state and some handlers, which handle state updation.
View can read State, and use it to show some information, but can’t write into it.
Actions can be called by View in order to interact with Store.
Actions does not mutate State directly, they just create requests and send them to Dispatcher.
Dispatcher receives information about necessary changes in Store, and generates event, which is sent to all connected Stores.
Finally, stores listen to events, and update internal state inside event handlers.
What is the difference between client side and server side rendering?
In case of CSR client receives almost empty HTML file and a lot of JavaScript code.
Then, client executes this code in order to build the application instance and generates the rest of HTML using JavaScript.
In case of Server – Side rendering, there are two ways we can go.
First is Server Side Generation. In this approach, we have pre-generated list of pages with static information, which we send to client. But this case client anyway has to get all dynamic information using API.
Second is Server Side Rendering. In this approach, we do more job on server side. After page was requested, we can make some API requests on server side, and then use this data to render more advanced version of web page.
What are pure components in React?
Pure components in React are special kind of components, which are updated only when their props are updated. So, their re-render can be triggered only by their props updating. In functional components we can create pure component using React.memo wrapper.
What is Lifting State Up in React?
Lifting state up is a development method, when in case if we have multiple components which need access to same changing data, then we move this state to their nearest common ancestor.
This helps to control this state in more centralized way, and simplifies one component updation when another component changes this state.
What are Higher-Order Components?
Higher order components are components which take another components render functions as properties and use these functions to render these components inside itself.
We can use higher-order components for multiple aims. Simpliest example is React memo component, which turns component into pure component, which is updated only when its props are updated.
Also, we can use this functionality to create slots, like in Vue. So, you provide content for this component in form of another component.
What are fragments?
Fragment is a special React component which you can use to group certain list of components without creating container using HTML elements, like div or section.
This makes components management more convenient, because this case you don’t create any additional DOM components, and will have less problems with CSS selectors, for example.
Also, this is possible to use key attribute on fragment component.
