React

What are custom hooks?

A custom hook is a function in JS whose name begins with 'use' and which calls other hooks. It permits you for reusing the stateful logic without any need for component hierarchy restructuring

What are keys in react?

A key is a special string attribute that needs to be included when using lists of elements.

Explain react hooks.

Hooks are functions that let us "hook into" react state and lifecycle features from a functional component. Hooks cannot be used in class components. Ex; useState hook lets us define a state for a component

What is react?

Important features: It supports server-side rendering. It will make use of the virtual DOM rather than real DOM (Data Object Model) as RealDOM manipulations are expensive. It follows unidirectional data binding or data flow. It uses reusable or composable UI components for developing the view.

What are the differences between controlled and uncontrolled components?

In a controlled component, the value of the input element is controlled by React. We store the state of the input element inside the code, and by using event-based callbacks, any changes made to the input element will be reflected in the code as well. In an uncontrolled component, the value of the input element is handled by the DOM itself. Input elements inside uncontrolled components work just like normal HTML input form elements.

What is JSX?

JSX is JavaScript XML. It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild() or createElement()

What are the limitations of react?

Not a full blown framework but only a library, inline templating and JSX might become complex

What are props in react?

Props are the inputs to a component. They can be single-valued or objects having a set of values that will be passed to components during creation. We can say that props are the data passed from a parent component to a child component

What is react hooks?

React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components. These are newly added features made available in React 16.8 version. Each lifecycle of a component is having 3 phases which include mount, unmount, and update. Along with that, components have properties and states. Hooks will allow using these methods by developers for improving the reuse of code with higher flexibility navigating the component tree.

Explain react state and props.

React State- Every component in react has a built-in state object, which contains all the property values that belong to that component. In other words, the state object controls the behavior of a component. Any change in the property values of the state object leads to the re-rendering of the component. React Props- Every React component accepts a single object argument called props (which stands for "properties"). These props can be passed to a component using HTML attributes and the component accepts these props as an argument. Using props, we can pass data from one component to another.

What are the rules that must be followed while using react hooks?

React hooks must be called only at the top level. It is now allowed to call them inside the nested functions, loops, or conditions. It is allowed to call the hooks only from the react function components

Why do react hooks make use of refs?

Refs are used in function components with useRef hook. Refs are used for managing focus, media playback, or text election; integrating with DOM libraries by third party; triggering the imperative animations

What is virtual DOM? How does react use the virtual DOM to render the UI?

The main difference between the real DOM object and the virtual DOM object is that any changes in the virtual DOM object will not reflect on the screen directly. React uses the current state of the object and the previous state of the object and compares them and updates only those objects that differ between the two DOM blueprints

What is the use of useEffect?

The useEffect hook is used for performing the side effects in functional components. With the help of useEffect, you will inform react that your component requires something to be done after rendering the component or after a state change. The useEffect React Hook will accept 2 arguments: useEffect(callback[, dependencies]); Where the first argument callback represents the function having the logic of side-effect and it will be immediately executed after changes were being pushed to DOM. The second argument dependencies represent an optional array of dependencies. The useEffect() will execute the callback only if there is a change in dependencies in between renderings

Explain about types of side effects in React component.

There are two types of side effects in React component. They are: Effects without Cleanup: This side effect will be used in useEffect which does not restrict the browser from screen update. It also improves the responsiveness of an application. A few common examples are network requests, Logging, manual DOM mutations, etc. Effects with Cleanup: Some of the Hook effects will require the cleanup after updating of DOM is done. For example, if you want to set up an external data source subscription, it requires cleaning up the memory else there might be a problem of memory leak. It is a known fact that React will carry out the cleanup of memory when the unmounting of components happens. But the effects will run for each render() method rather than for any specific method. Thus we can say that, before execution of the effects succeeding time the React will also cleanup effects from the preceding render.

What are the advantages of using react?

Use of virtual DOM to improve efficiency, gentle learning curve, reusable components, huge ecosystem of libraries to choose from

What is prop drilling in react?

When we pass data from a component that is higher in the hierarchy to a component that is deeply nested, we pass props from a source component and keep passing the prop to the next component in the hierarchy till we reach the deeply nested component. Disadvantage is that the component that should otherwise not be aware of the data have access to the data

What are the differences between functional and class components?

With the introduction of hooks, functional components are essentially equivalent to class components. Functional components handle state with hooks, class components use this.state.

What are error boundaries?

error boundary is a component using one or both of the following methods: static getDerivedStateFromError and componentDidCatch.

What is useState()?

useState() is a built in react hook that allows you to have state variables in functional components. It should be used when the DOM has something that is dynamically manipulating/controlling.