What’s the power of React framework?
React allows you to write maintainable and performant code by using the concept of components. Components allow you to focus on describing the UI you want, rather than focusing on the details of how to UI actually get inserted in the page.
- Its declarative Syntax
- Component-Based Architecture
- Virtual DOM and efficient Updates
It’s more efficient to first load a bunch of stuff and then load in to the DOM → render
Short Recap: What’s A DOM node? And what’s the dom?
Document Object Model, is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text. A DOM node, which stands for Document Object Model node, is a fundamental concept in front-end web development. It represents an individual element or part of a web page, and it’s used to structure and manipulate the content of a webpage.
What’s reconciliation in React
Reconciliation in React refers to the process by which React updates the DOM to reflect changes in the state of a component. When the state or props of a component change, React needs to figure out how to update the actual DOM efficiently. The reconciliation process is the algorithm that React uses to make this determination.
What Happens under the Hood of React? Use Components, Virtual DOM, Reconciliation, Efficient DOM updates
- React components are like reusable building blocks for your UI. They can be as simple as a button or as complex as an entire page. Components can have their own state (internal data) and receive data from their parent components via props (properties). omponents are reusable, self-contained units that encapsulate the UI’s logic, behavior, and appearance. They allow developers to break down complex UIs into smaller, manageable pieces, making it easier to develop, maintain, and test applications. In React we Create a component instance, a “living organism”, consumed its props, deduces states, etc. and returns element (JS OBJECT), plain object, its not HTML, its description of what we want to produce —> JSX.
- Virtual DOM:
React’s Virtual DOM is an in-memory representation of the actual DOM. When your data changes, React first updates the Virtual DOM instead of the real DOM. This is faster because manipulating the in-memory representation is quicker than directly manipulating the browser’s DOM. - Reconciliation and Diffing Algorithm:
When the data changes, React doesn’t immediately update the real DOM. Instead, it performs a process called reconciliation using a diffing algorithm.
Imagine you have a before-and-after snapshot of your UI. React’s diffing algorithm figures out what has changed between these snapshots. It identifies the differences and calculates the most efficient way to update the actual DOM based on these changes. - Efficient DOM Updates:
React then updates only the parts of the actual DOM that have changed. This is a key reason for React’s performance. It doesn’t redraw the entire UI; it only makes the necessary updates, keeping your application fast and responsive.
Make a comparison to a Book, and explain how React works
Imagine a Story:
Think of your web page like a book. The words on the pages represent what users see on the screen.
React is like a magical editor that helps you make changes to your book. Instead of scribbling directly on the pages, React works on a special notepad called the Virtual DOM.
Reconciliation is the editor’s process of comparing two versions of your book and deciding what needs to change in the actual pages.
What’s the difference between the virtual dom and the real dom?
The real DOM is an object-based representation of an HTML document + an interface for manipulating object. The Virtual dom is a copy of the real DOM used by React to make sure what’s changes are to make to the real DOM by comparing the Virtual with the “real” dom
What are Limitations of React?
React is a library, not a framework → lets you rome free, no real structure to follow
It is large
Being owned by Facebook
Documentation
What is JSX?
JSX, which stands for JavaScript XML, is a syntax extension for JavaScript. It is commonly associated with React, a JavaScript library for building user interfaces. JSX allows you to write HTML-like code within JavaScript, making it easier to describe the structure of UI components.
JSX get transformed in an javascript object and eventually rendered to the page
What are props and what’s “Prop Drilling”?
In the context of React, “props” is short for “properties,” and it refers to the mechanism by which data is passed from one component to another. Props allow you to pass data from a parent component to a child component.
Prop drilling occurs when you pass a prop through multiple layers of components, and some intermediate components don’t actually use the prop but are required to pass it down to their children. This can make the code harder to maintain and understand. You can use context to overcome the problem of prob drilling
Difference between props and state?
Props - pass down values
State - ‘like local/scoped variable’ , keeps UI updated, component re-render
What is the component lifecycle?
Mounting, Updating, Unmouting
What is useEffect, what parameters does it take, and when does it run?
useEffect is a Hook in React that enables you to perform side effects in function components. Side effects can include data fetching, subscriptions, manual DOM manipulations, and more. It takes in two elements, the effect function, and a dependency array.
What’s the difference between refs and state variables?
state - cause components to rerender
refs - value persist across renders
When best time to use?
Managing focus or media
Triggering Animations
Integrating with DOM libraries
Why would you use Context in React? What are the steps of actually using it?
(1) Create context outside of app component
const ThemeContext = React.createContext()
(2) Use the context provider around the components where you need it
export default function App() {
return (
<ThemeContext.Provider>
<div className="container dark-theme">
<Header />
<button></button>
</div>
</ThemeContext.Provider>
)
(3) Add value to the context and use it in the children with useContext(), don’t forget to export ThemeContext
import { ThemeContext } from “./App”
const value = React.useContext(ThemeContext)
What are route Params and how would you use it?
In React Router, route parameters allow you to capture dynamic values from the URL. It’s a way for your components to respond to changes in the URL and use the values provided in the URL to render different content.
<Route path=”/users/:userId” component={UserDetails} />
import { useParams } from “react-router-dom”
const params = useParams()
Can you send values from parents to child In react router within Outlet?
Yes, in the context of React Router, you can pass values from a parent component to the Outlet component using a mechanism similar to props. The Outlet component in React Router is typically used within a layout or parent component to render the child components that correspond to specific routes
What are Search params?
In React Router, search parameters are a way to pass and retrieve information in the URL query string. The query string is the part of a URL that comes after the “?” character, and it typically consists of key-value pairs separated by “&” symbols.
