Sample React flashcards from our app

Download our app from the App Store or Google Play to get more free flashcards or subscribe for access to all flashcards.

What is JSX and why does React use it?

JSX is a syntax extension for JavaScript that allows for writing HTML structures directly in JavaScript code. It's one of the fundamental elements upon which React.js is built. That's why JSX is so crucial in the React ecosystem.

React uses JSX for several reasons:

1. Code cleanliness: JSX simplifies the code development process, allowing developers to place HTML structures directly in JavaScript. Without JSX, creating user interfaces in React would be significantly more complicated.

2. Ease of use: JSX makes JavaScript resemble HTML, which makes it easier for developers to use, especially those already familiar with HTML.

3. Security: JSX automatically secures code against all kinds of attacks, such as XSS (Cross-Site Scripting), through unique element embedding.

4. Performance: JSX code is optimized for performance. It is translated into JavaScript syntax, which is faster interpreted by web browsers.

Technically, JSX is nothing more than syntactic sugar for the `React.createElement(component, props, ...children)` function.

What is the Virtual DOM and what are its advantages?

The Virtual DOM, or virtual model of the Document Object Model (DOM), is a concept used in certain JavaScript libraries, such as React. It is a lightweight copy of the real DOM, which is kept in memory and updated independently of the actual DOM.

The main advantages of Virtual DOM are:

1. Updates are faster. The Virtual DOM is lighter and fewer operations run through it than in the case of the real DOM. As a result, update operations are performed faster.

2. Reduces the load on the actual DOM. All changes are first processed in the virtual DOM, and then, through a process called reconciling, selected changes are introduced into the real DOM. This can avoid heavy, frequent DOM updates.

3. Optimizes the rendering process. React, using Virtual DOM, is able to calculate the most efficient way to carry out updates in the real DOM. This reduces the amount of necessary operations and improves rendering performance.

4. Coding becomes simpler. Developers can code as if the entire page were being rendered anew after each change. React takes care of optimizing the process so that only the minimum amount of work necessary to synchronize the virtual and real DOM is performed.

What are props and how are they passed in React components?

Props (from "properties") are the properties of components in the React library. They are used to pass data from one component to another, these are the data that a component receives from the parent component and are usually passed when the component is invoked.

Props are immutable, which means that a component should not modify the values of the props it receives, but should only read them.

Props are passed in a one-way manner (from top to bottom), i.e. from parent components to child components. It looks similar to passing attributes to HTML elements.

Here's an example of how to use props:

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

In the above example, we create a `Welcome` component that expects a `name` prop. Then in the `App` component, we create an instance of the `Welcome` component and pass it a `name` prop with a value of "Christopher". As a result, where we used the Welcome component, the text "Welcome, Christopher" will be displayed.

Explain what the useEffect hook is and what it's used for.

The useEffect hook in React.js is used to perform side effects in functional components. Side effects are typically actions that do not directly affect the rendering of the component, but are necessary for its proper operation, such as fetching data from an API, handling timers, or cleaning up resources.

It works similarly to the lifecycle methods of the component: componentDidMount, componentDidUpdate and componentWillUnmount in class components.

We can use it in three different variants:

1. Without a second argument: The code is called after every render.

useEffect(() => {
  console.log('This will run after every render');
});

2. With an empty array as a second argument: The code is called only once after the first render, analogous to componentDidMount.

useEffect(() => {
  console.log('This will run only once, after the first render');
}, []);

3. With an array of dependencies as a second argument: The code is run after the first render and then every time the value of any dependency in the array changes.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('This will run after the first render, and every time "count" changes');
}, [count]);

In summary, the useEffect hook enables the execution of side effects after or during the rendering of functional components, which in turn enables clean and understandable code, whilst guaranteeing full functionality.

React Flashcards

Sample React flashcards from our app

What is JSX and why does React use it?

What is the Virtual DOM and what are its advantages?

What are props and how are they passed in React components?

Explain what the useEffect hook is and what it's used for.

Download IT Flashcards App Now