ReactJS

What does "universal" mean in React?

"universal" refers to the ability to run React code both on the client side and on the server side. This approach is also known as "isomorphic" or "universal JavaScript."

Example of Declarative

// Imperative let list = document.querySelectorAll('li'); for(let i = 0; i < list.length; i++) { list[i].style.color = 'red'; } // Declarative (React) <ul> <li style={{ color: 'red' }}>Item 1</li> <li style={{ color: 'red' }}>Item 2</li> <li style={{ color: 'red' }}>Item 3</li> </ul>

What is a component?

A component is a code that renders a part of the interface. Components can be parameterized and reused and can contain their state.

Can you name some libraries for the management of the Global Store?

A global store is a way to manage and share state across multiple components in a React application. There are several libraries and patterns that can be used to achieve this, such as the React Context API, Redux, and MobX.

What is a state in React?

A state is an object that contains data that can change over time. In React, the state is used to control changes to the interface.

What is conditional rendering in React?

Conditional rendering is the way to display one component or another depending on a condition. To do conditional rendering in React we use the ternary operator: ? :

What is the difference between controlled and uncontrolled components?

Controlled components: These have a state that controls the component's value. Therefore, the component's value is updated when the state changes. Uncontrolled components: These do not have a state that controls the component's value. The state of the component is controlled by the browser internally. To know the component's value, we have to read the value of the DOM.

Explains use cases of the useEffect hook

Execute code when the component is rendered, when the dependencies of the effect change, or when the component is unmounted. That's why it can be useful for making calls to APIs as soon as the component is mounted or when the dependencies change. Perform event tracking, such as Google Analytics, to determine which pages users visit. We can validate a form to update the UI whenever the state changes and show where the errors are. We can subscribe to browser events, such as the resize event, to know when the user resizes the window.

What are the differences between class components and functional components?

Functional components are usually easier to read and write and may perform better. On the other hand, class components allow us to use the component lifecycle, something we can't do with functional components, where we can only use useEffect.

What is a High Order Component?

In React, a "Higher-Order Component" (HOC) design pattern allows you to reuse component logic. A HOC is a function that takes a component as an argument and returns a new component with some additional functionality.

What is a Hook?

In React, a "hook" is a special function that allows you to use state and other React features in functional components instead of using class components. Hooks were introduced in React 16.8 as a way to make it easier to reuse stateful logic between components. They include built-in hooks such as useState ****and useEffect, as well as custom hooks that you can create yourself. Hooks make it possible to write functional components just as powerful as class components but with less code and complexity.

Explain the different types of lifecycles.

In React, a component's "lifecycle" refers to the various stages a component goes through, from its creation to its eventual destruction. The component lifecycle can be broken down into three main phases: Mounting, Updating and Unmounting

What are pure components?

In React, a pure component is a component that only updates when its props or state have changed. Pure components use the shouldComponentUpdate() lifecycle method to determine if the component should re-render. This method compares the current props and state with the next props and state and only returns true if there is a difference. By doing this, pure components can greatly improve the performance of a React application by avoiding unnecessary re-renders.

Mounting

Mounting: This the phase where a component is first created and inserted into the DOM. During this phase, React will call several lifecycle methods on the component, including constructor(), componentWillMount(), and render().

Is React a library or a framework? Why?

Officially, React calls itself a library. This is because in order to create a complete application, you need to use other libraries. For example, React does not offer an official application routing system. Therefore, you have to use a library like React Router or use a framework like Next.js that already includes a routing system. You also can't use React to add the headers that go into the <head> in your application, and you'll also need another library or framework to fix this. Another difference is that React has no opinion on which app wrapper to use. On the other hand, Angular in its own tutorial already tells you that you must use @angular/cli to create an application, on the other hand, React always leaves you the freedom to choose which packager to use and offers different options.

What are portals in React?

Portals allow us to render a component on a DOM node that is not a child of the rendering component.

What is the difference between props and state?

Props are objects passed as arguments from parent to child components. They are immutable and cannot be modified from the child component. The state is a value that is defined within a component. Its value is immutable (can't be modified directly) but you can set a new state value to make React re-render the component.

What are props in React?

Props are the properties of a component. It is data that is passed from one component to another.

What is React?

React is a JavaScript library for building user interfaces. It is mainly used for building reusable UI components, allowing developers to easily update and maintain their code. React uses a virtual DOM, which optimizes updates and improves performance by minimizing the number of changes made to the actual DOM. Additionally, React allows for easy integration with other libraries and frameworks, making it a popular choice for building complex web applications.

What does it mean that React is Declarative?

React is declarative, which means that you don't specify how a task should be performed but rather what should be performed. This makes the code easier to understand and maintain.

Can you explain the concept of Unidirectional data flow in React?

React is unidirectional, which means that data flows in only one direction. Data flows from parent components to child components.

What is JSX?

React uses JSX to declare what it should render. JSX is a JavaScript extension that allows you to write code closer visually to HTML, improving the readability of the code and making it easier to understand.

What is the difference between Shadow DOM and Virtual DOM?

The Shadow DOM is a browser API that allows us to create an independent tree of DOM nodes within a DOM element. This allows us to create components that don't interfere with the rest of the application. It is especially used with Web Components. The Virtual DOM is a representation of the DOM in memory. This representation is created every time there is a change in the DOM. This allows us to compare the current DOM with the old DOM and thus determine what changes need to be made to the actual DOM. React and other libraries use it to make minimum changes to the actual DOM.

What advantages and disadvantages do controlled and uncontrolled components have?

The advantage of controlled type of component is that they are easier to test because they do not depend on the interface. They also allow us to create validations very easily. The downside is that they are more complex to create and maintain. Also, they can have worse performance since they cause a re-rendering every time the input value changes. The advantage of uncontrolled type of component is that they are effortless to create, and you don't have to maintain a state. Also, performance is better since it doesn't have to be re-rendered when changing the value of the input. The downside is that you have to deal more with the DOM directly and create imperative code.

What is the children prop in React for?

The children prop is a special prop that is passed to components. It is an object that contains the elements that a component wraps.

What is the useCallback hook for?

The useCallback hook is a hook that allows us to memorize a function. This means that if the function we pass to it as a parameter has not changed, it is not executed again, and the function that had already been calculated is returned.

What does the useEffect hook do?

The useEffect hook is used to execute code when the component is rendered or when the dependencies of the effect change. Receive two parameters: The function is to be executed when changing dependencies or rendering the component. An array of dependencies. If you change the value of any dependency, it will execute the function.

What is the useMemo hook for?

The useMemo hook is a hook that allows us to memorize the result of a function. This means that if the function that we pass to it as a parameter has not changed, it is not executed again, and the result that had already been calculated is returned.

What does the "useState" hook do?

The useState hook is used to create state variables, which means that its value is dynamic, that it can change over time, and that requires a re-rendering of the component where it is used. Receives a parameter: The initial value of our state variable. Returns an array with two variables:

Using the useState hook will return an array of two positions:

The value of the state. The function to change the state.

Can you explain the concept of the virtual DOM in React?

The virtual DOM is an in-memory representation of the real DOM. When the state of a component changes, React re-renders the interface. Instead of modifying the actual DOM, React modifies the virtual DOM and then compares the virtual DOM with the actual DOM. This way, React knows what changes should be applied to the actual DOM.

What are stateless components?

These components are created with a function and do not have access to the application state. The advantage of these components is that it makes it easier to create pure components (which always render the same for the same props).

What are render props?

They are a React design pattern that allows us to reuse code between components and inject information into the rendering of components.

Unmounting

Unmounting: This is the phase where a component is removed from the DOM. During this phase, React will call the componentWillUnmount() method on the component.

Updating

Updating: This is the phase where a component's props or state changes, and React updates the component and its children accordingly. During this phase, React will call several lifecycle methods on the component, including componentWillReceiveProps(), shouldComponentUpdate(), componentWillUpdate(), and render().

Why might it be bad practice to use an index as a key in a React list?

When we render a list of items, React needs to know which items have been changed, added, or removed. To do this, React needs a unique key for each item in the list. If we don't pass it a key, React uses the element's index as the key.

What is ReactDOM?

While the React library, simply, is the component creation engine, hooks, props system, and state... React DOM is the library that is responsible for rendering React components specifically in the browser.

What is the difference between useCallback and useMemo?

useCallback memorizes a function and useMemo memorizes the result of a function.