React Flashcards
(37 cards)
What is React?
React is a popular JavaScript library used for frontend development created by Facebook in 2013.
In calling setState, when would you pick one method of calling this function over the other?
There are 2 common ways to call setState
Object Form which will overwrite the previous state
Functional Form which will use a callback function also known as an updater function, this receive the most recent version of that state and return an updated version.
Is setState synchronous or async call?
setState is an async call, uses reconciliation and batches multiple setState calls for performance optimizations.
What are different ways that you can call setState?
In early versions of React there was a set lifecycle methods that developers could use to call setState, you would use these in Class Components
constructor()
render()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
In newer versions of React developers can now use hooks allowing users to use useEffect and useLayoutEffect to achieve a similar functionality in Functional Components.
List some major advantages of React
Component-Based Architecture
One-way Data Flow
Virtual DOM
Large and active community
Developer Tools
Backed by Facebook/Meta
Declarative Syntax
What are some limitations of React?
Complexity
Learning Curve
Initial Load Time
Performance Impact with large application
Lack of Official Guidelines
Breaking Changes when updated sometimes
Its not a framework its a library
What is JSX?
JSX or JavaScript XML is syntax extension of JavaScript that is used in react to allow developers to write HTML in JavaScript.
What is the virtual DOM? Explain how it works with ReactJS
The virtual DOM is a lightweight copy of the real DOM. It works by comparing the previous virtual DOM with the updated version and only making the necessary changes.
Why can’t browsers read JSX?
JSX isn’t valid JavaScript and needs to changed into JavaScript using a transpiler.
How different is React’s ES6 syntax when compared to ES5?
Class Syntax / functional components
Default Parameters
Arrow Functions
Spread Operator
Let and Const Declaration
Destructuring Assignment / digging into state or prop
Template Literals / backticks
Import and Export Statements
What is the differentiate between Real DOM and Virtual DOM?
The Real Dom is the actual representation of the HTML structure on the web browser. The Virtual DOM is an abstraction of the Real DOM, changes will be rendered here first and compared to the old virtual DOM then old the changes will render, making it more efficient?
What do you understand from “In React, everything is a component.”?
Components are the building blocks of React. Allowing developers to break the UI down into smaller pieces. This is great for performance and reusability.
Explain the purpose of Render() in React.
Render() is the lifecycle method used in class components that defines the components UI. In functional components the the render() method is the body itself that returns the JSX expression.
How can you embed two or more components into one?
You can call a component inside of another component also called nesting.
Define “props” in the context of React.
Props is short for properties, props are used to pass data from a parent component to a child component. This data is read only
What is a state in React and how is it used?
An object that represents the internal data of a component allows a component to store and manage data dynamically. It is used to influence the rendering of components to build an interactive and dynamic UI
How can you update the state of a component?
Call the setState method, this can be used in a class component but will rewrite the state in the desired syntax, or in a functional form which will update the previous state
What is an arrow function in React? How is it used?
A more concise way to define function, making the code more readable. It is used to make cleaner and more condensed code.
Differentiate between stateful and stateless components. Stateful vs Stateless Components React.
Stateful components can be dynamic and can manage their own state and handle complex logic. while stateless components are pure components and handle simple logic that rely on props.
What are the different phases of React component’s lifecycle?
The three phases are Mounting, Updating, and Unmounting
Explain the lifescycle methods of React components in detail
Mounting puts elements into the dom. A component is updated when there is a change in state or props. Unmounting is removing a component from the dom.
What is an event in React?
An object that represents a specific action or interaction triggered by the user or the system.
How do you create an event handler in React?
In React, you can create an event handler by defining a function and attaching it to an event in JSX.
What are synthetic events in React?
In React, synthetic events are a cross-browser wrapper around the browser’s native events.
