React is a popular JavaScript library for building user interfaces. It allows you to create reusable UI components and efficiently update and render them when the underlying data changes.
Component-Based Architecture: React follows a component-based approach, allowing you to create self-contained, reusable UI components. These components can be composed together to build complex user interfaces.
Virtual DOM: React utilizes a virtual DOM (Document Object Model) for efficient rendering. The virtual DOM is a lightweight copy of the actual DOM, and React uses it to efficiently update and render only the necessary components when the state or props change.
Unidirectional Data Flow: React enforces a unidirectional data flow, which means data flows in a single direction. This helps maintain a predictable state management and makes it easier to debug and understand how data changes in your application.
JSX Syntax: React introduces JSX (JavaScript XML), a syntax extension that allows you to write HTML-like code within your JavaScript files. JSX provides a declarative way to describe the structure and appearance of your components.
Vite is a build tool that offers a faster and more efficient development experience when working with React (and other frameworks). It is an alternative to tools like Create React App (CRA) and provides several benefits that make it worth considering:
💡 Fast Development Server: Vite utilizes an extremely fast development server that leverages native ES modules in modern browsers. It offers quick startup times and provides near-instant hot module replacement (HMR), allowing you to see your changes immediately without having to manually refresh the page.
💡 Instant Server-Side Rendering (SSR): Vite supports instant server-side rendering for React applications, enabling faster initial page loads and better SEO (Search Engine Optimization) by serving pre-rendered HTML.
💡 Efficient Production Builds: When it comes to production builds, Vite optimizes the output by leveraging native ES modules. It generates highly optimized and tree-shaken bundles, resulting in smaller file sizes and faster load times for your React application.
💡 Native Support for JSX and TypeScript: Vite has built-in support for JSX and TypeScript, allowing you to write React components using JSX syntax and take advantage of TypeScript’s static typing.
💡 Flexible Configuration: Vite provides a simple and intuitive configuration file (vite.config.js) that allows you to customize the build process according to your project’s specific needs. It offers a wide range of options for customization, making it a flexible tool for React development.
Installing the latest version
npm create vite@latest
For a specific version
npm create vite@4.1.0
Full Process
npm create vite@latest**Choose your application name**Choose the project you want to install- ➡️ Vanilla- ➡️ Vue- ➡️ React- ➡️ Preact- ➡️ Lite- ➡️ Svelt ...**Install Your dependencies**npm installornpm i
App.tsx : App.tsx is a TypeScript file that contains a React component.
styles/: This folder holds the CSS or styling files for your components. In this example, App.css is a CSS file specific to the App.tsx component.
index.tsx: This TypeScript file is the entry point of your React application. It typically renders the main component (in this case, App.tsx) into the DOM. You can import and use other components or libraries in this file.
index.css: This CSS file is specific to the index.tsx file and can be used to apply global styles to your application.
Index.html : contains a div that is the container of our application (id=root)
To create our react component we must put it inside the src folder
Create a message component of the file type tsx
// PascalCasing// Should always be followed when creating a funciton component.function Message(){ //JSX: JavaScript XML, this code will be converted to JS code. return <h1>Good Morning</h1>;}// Exporting the component so that it can be used in other files.export default Message;
// PascalCasing// Should always be followed when creating a funciton component.function Message() { const name = "Gisa ilunga Daniel" // inside {} you can write any javascript expression // return <h1>Good {name}</h1>; // You can use conditional statements if (name) return <h1>Good {name}</h1> return <h1>Good Human.</h1>}// Exporting the component so that it can be used in other files.export default Message
🔖 The .ts extension is used for regular TypeScript files. These files contain TypeScript code, which gets transpiled into JavaScript before being executed. You should use the .ts extension for most of your TypeScript files.
🔖 The .tsx extension is used for TypeScript files that contain JSX (JavaScript XML) syntax. JSX allows you to write HTML-like code within your TypeScript files, making it easier to define React components. When using React with TypeScript, you should use the .tsx extension for files that contain JSX code.
React and ReactDOM are two key libraries in the React ecosystem:
React: React is a JavaScript library for building user interfaces. It provides a declarative and efficient way to create reusable UI components. React allows you to write components using JSX syntax, which is a combination of JavaScript and XML-like syntax. React focuses on the rendering of components and manages component lifecycle, state, and props. It provides a virtual DOM (Document Object Model) for efficient updates and rendering of components.
ReactDOM: ReactDOM is a package that serves as the glue between React and the actual DOM (Document Object Model) in the browser. It provides methods and APIs to render React components into the browser DOM, handle updates, and interact with the DOM.
The React ecosystem refers to the collection of libraries, tools, and resources that are built around or are compatible with React. It has grown significantly since React’s initial release and continues to expand, providing developers with a wide range of options and capabilities to enhance their React development experience.
React Router: React Router is a popular library for handling routing in React applications. It allows you to define and manage different routes, enabling navigation between different views or pages within your application.
State Management Libraries: React itself provides local component state management, but for more complex applications, you may need additional state management solutions. Libraries like Redux, MobX, and Zustand offer centralized state management, enabling you to manage application-wide state and simplify data flow within your React components.
React UI Component Libraries: Various UI component libraries provide pre-built and customizable UI components for React applications. Examples include Material-UI, Ant Design, Semantic UI React, and Chakra UI. These libraries help you build consistent and visually appealing user interfaces by offering ready-to-use components like buttons, forms, modals, and more.
React Native: React Native is a framework that allows you to build native mobile applications using React. With React Native, you can write code in React and deploy it to iOS and Android devices, sharing a significant portion of the codebase between platforms.
Next.js: Next.js is a popular framework built on top of React that adds server-side rendering (SSR) capabilities, along with other features like static site generation (SSG), routing, and API handling. It simplifies the creation of server-rendered React applications and offers a seamless developer experience.
Testing Libraries: React has a robust ecosystem of testing libraries and frameworks. Tools like Jest, React Testing Library, Enzyme, and Cypress provide various options for unit testing, integration testing, and end-to-end testing of React applications.
Tooling and Build Systems: Tools like Vite, Create React App (CRA), and webpack provide convenient setups and configurations for building, bundling, and optimizing React applications. They handle transpilation, code splitting, hot module replacement, and other optimizations to improve the development and production workflows.
React DevTools: React DevTools is a browser extension and standalone tool that helps developers inspect, debug, and profile React components in real-time. It provides insights into the component tree, state changes, and performance optimizations.
A library is a collection of pre-written code that provides specific functionality or features. It typically consists of a set of reusable modules or components that developers can use in their applications. Libraries are designed to be flexible and modular, allowing developers to pick and choose the components they need and integrate them into their own codebase. Examples of libraries include React, Axios, Lodash, and Moment.js.
➡️ Libraries are often focused on solving a particular problem or providing a specific set of functionalities.
➡️ Developers have more control over how they use libraries and can integrate them into their existing codebase as needed.
➡️ Libraries are typically less opinionated and allow for greater flexibility in application architecture and design choices.
➡️ Libraries are usually imported and used within the developer’s code, acting as a tool to extend or enhance existing functionality.
A framework, on the other hand, is a more comprehensive software development platform that provides a structured approach to building applications. It usually includes a set of rules, conventions, and tools that guide the development process. Frameworks provide a foundation or scaffolding for building applications by defining the overall architecture, flow control, and common patterns. Examples of frameworks include Angular, React (when used with tools like Next.js or Gatsby), and Ruby on Rails.
➡️ Frameworks often provide a complete solution for developing a specific type of application, offering a defined structure and a set of rules to follow.
➡️ Developers work within the framework’s constraints, adhering to its conventions and patterns.
➡️ Frameworks handle many aspects of the application, such as routing, data management, and building blocks, which can reduce development time.
➡️ Frameworks are typically more opinionated and impose a specific way of doing things to ensure consistency across the application.
#map
In React, the map() method is commonly used to iterate over an array of data and dynamically render components based on that data. The map() method is often used within the JSX code to generate a new array of React components or JSX elements.
function ListGroup() { const items = ["Rwanda", "Burunde", "Uganda", "Kenya"] return ( <> <h1>THis is just a best way </h1> {" "} <ul className="border inline-block rounded-lg "> {" "} {items.map((item, index) => ( <li className="text-gray-900 border p-4 " key={index}> {item} {" "} </li> ))} {" "} </ul> {" "} </> )}
#conditionals
Conditional rendering in React allows you to conditionally display or hide components, elements, or content based on certain conditions or state values. It allows you to dynamically control what gets rendered in the user interface.
There are several ways to achieve conditional rendering in React:
➡️ if/else Statements:
You can use traditional JavaScript if/else statements to conditionally render components or elements. Here’s an example:
import React from "react"function MyComponent({ isLoggedIn }) { if (isLoggedIn) { return <p>Welcome, user!</p> } else { return <p>Please log in to continue.</p> }}
➡️ Ternary Operator:
The ternary operator (condition ? trueValue : falseValue) is a concise way to conditionally render content. Here’s an example:
import React from "react"function MyComponent({ isLoggedIn }) { return isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in to continue.</p>}
➡️ Logical && Operator:
The logical AND (&&) operator can be used for simple conditional rendering. If the condition evaluates to true, the subsequent element will be rendered. Otherwise, it will be skipped. Here’s an example:
➡️ Switch Statement:
In more complex scenarios with multiple conditions, you can use a switch statement for conditional rendering. Each case can return the desired component or content. Here’s an example:
import React from "react"function MyComponent({ role }) { switch (role) { case "admin": return <AdminDashboard /> case "user": return <UserDashboard /> default: return <GuestMessage /> }}
We want to render some list of items if they are there otherwise render something else
The not so good way, where we have a bit of redundancy
function ListGroup() { const items = ["Rwanda", "Burunde", "Uganda", "Kenya"] if (items.length === 0) return ( <> <h1>Nothing To render in here</h1> <p>No Item found </p> {" "} </> ) return ( <> <h1>THis is just a best way </h1> {" "} <ul className="inline-block border rounded-lg "> {" "} {items.map((item, index) => ( <li className="p-4 text-gray-900 border " key={index}> {item} {" "} </li> ))} {" "} </ul> {" "} </> )}export default ListGroup
A better implementation to avoid redundancy
function ListGroup() { const items = ["Rwanda", "Burunde", "Uganda", "Kenya"] return ( <> <h1>THis is just a best way </h1> {" "} {items.length === 0 ? <p>No Item To render found</p> : null} // The above can be rewritten beaurifully like this: // {items.length === 0 && ( <p>No Item To render found</p> )} <ul className="inline-block border rounded-lg "> {" "} {items.map((item, index) => ( <li className="p-4 text-gray-900 border " key={index}> {item} {" "} </li> ))} {" "} </ul> {" "} </> )}export default ListGroup
Sometimes the logic above in the ternary operator can get a bit complicated and it can pollute our jsx markup , in those cases we can always extract the logic and store it in a variable of ra constant .
function ListGroup() { const items = ["Rwanda", "Burunde", "Uganda", "Kenya"] const message = items.length === 0 ? <p>No Item To render found</p> : null return ( <> <h1>THis is just a best way </h1> {message} {" "} <ul className="inline-block border rounded-lg "> {" "} {items.map((item, index) => ( <li className="p-4 text-gray-900 border " key={index}> {item} {" "} </li> ))} {" "} </ul> {" "} </> )}export default ListGroup
Now it's much better, we can also move the logic in a function to make our code even cleaner
[/] In JSX, attach an event listener by using the on<EventName> attribute on an element. For example, to handle a click event, use onClick.
➡️ Define an Event Handler Function:
[/] Create a function that will be called when the event occurs. It can receive an event object as an argument, which contains information about the event.
➡️ Update State or Perform Actions:
[/] Inside the event handler function, update component state, call other functions, make API requests, or perform any desired action based on the event.
Here’s an example of handling a click event in a React component:
When an event occurs, React passes an event object to the event handler function. This object contains information about the event, such as the target element, mouse coordinates, or key codes. You can access this information within the event handler function.
function handleClick(event) { console.log("Clicked element:", event.target)}
To pass additional arguments to the event handler function, you can use arrow functions or the bind() method to set the context and arguments explicitly.
In some cases, you may want to handle events for multiple elements using a single event handler. This is called event delegation. You can attach the event listener to a parent element and determine the target element within the handler function.
function handleButtonClick(event) { if (event.target.tagName === "BUTTON") { // Handle button click }}
Because we are using type script, we must use type annotation, since we are passing an event listener to our e, then we must reference that .that is why we used :MouseEvent.
State in React is a way to manage and store data that can change over time. It allows you to create dynamic and interactive user interfaces. In functional components, you can use the useState hook to add state management to your components.
Here’s how you can use the useState hook in a React component:
import React, { useState } from "react"function Counter() { // Declare a state variable named "count" with an initial value of 0 const [count, setCount] = useState(0) return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> )}export default Counter
What happened above is that:
[p] We import useState from React.
[p] Inside the Counter function component, we declare a state variable count using useState(0).
🔖 The useState function takes an initial value (in this case, 0) and returns an array with two elements: the current state value (count) and a function to update it (setCount).
[p] We display the current value of count in the JSX using {count}.
[p] When the “Increment” button is clicked, we call setCount to update the count state by incrementing it.
In this example, we use two separate useState calls to manage name and email independently.
## State Updates are Asynchronous
It's important to note that state updates in React are asynchronous. If you need to perform actions immediately after a state update, you should use the useEffect hook or pass a callback function to the state updater.
Lazy Initialization: When you pass a function to useState, React will call that function to initialize the state value only once, the first time the component is rendered. This can be beneficial for expensive or complex initializations that you don’t want to compute on every render. It ensures that the initialization code runs only when needed, improving performance.
Passing a function to useState()
const [count, setCount] = useState(() => { // This function is only called once during the initial render. return expensiveInitialization()})
When you use the function form of setState (e.g., setCount(prevCount => prevCount + 1)), you can safely update state based on the previous state value. This is particularly useful when you need to calculate the next state based on the current state, as it prevents potential race conditions and ensures that state updates are applied correctly.
#useEffect
The useEffect hook allows you to perform side effects (like data fetching,manual DOM manipulation, subscriptions, etc.) in functional components.
Some of the few things you would want to do with the useEffect would be
Some side effects need cleanup. For instance, if you set up a subscription or event listener, you’d want to remove it when the component is no longer in use. To achieve this, return a function from your effect:
#### What you should know about State hooks in react:
💡 State Updates are Asynchronous:
➡️ Not immediately of course,
➡️ When you call the state updater function (e.g., setCount), React schedules a state update, and the new state value may not be immediately available. React batches multiple state updates for performance reasons.
💡 Functional Updates:
➡️ You can also use a functional update when the new state depends on the previous state. Instead of passing a new value directly, you can pass a function that receives the previous state and returns the new state.
setCount((prevCount) => prevCount + 1)
💡 Multiple State Variables:
➡️ You can use useState multiple times in a component to manage multiple state variables.
💡 State is Preserved:
➡️ React ensures that the state is preserved between renders. When the component re-renders, it will have the same state values as before.
💡 Initialization Logic:
➡️ The useState hook should not be called conditionally or inside loops. It should be called at the top level of your component function.
The why it should be called in the top level component is that:
Consistency and Readability:
Placing state hooks at the top of your component function creates a consistent and easily recognizable pattern. It makes it clear to other developers (and to your future self) that state is being managed within the component.
Avoiding Conditional Calls:
State hooks, like useState, should not be called conditionally within a component. They should be called in the same order on every render. Placing them at the top ensures that they are always called in a consistent manner, avoiding unexpected behavior.
Initialization Logic:
State hooks should be called during each render of the component to ensure that the state is correctly initialized. Placing them at the top ensures that they are called on every render.
Predictable Behavior:
React relies on the order of hooks to maintain state between renders. Placing state hooks at the top of the component ensures predictable behavior, as React tracks the order in which hooks are called to correctly associate state with components.
Separation of Concerns:
Defining state at the top of the component allows you to separate your component’s logic into clear sections. First, you declare your state variables, followed by any other logic, event handlers, and rendering JSX. This separation makes your code more organized and maintainable.
Easier Debugging:
When you place state hooks at the top of your component, it’s easier to locate and debug any issues related to state management. You can quickly inspect and modify the state initialization and updates.
In React, “props” is short for “properties,” and it’s a way to pass data from a parent component to a child component. Props allow you to make your components reusable and dynamic by providing data and behavior from one component to another.
Passing Props: To pass a prop to a child component, simply add it as an attribute when rendering the child component.
Accessing Props: In the child component, you can access props by declaring a function parameter (in the example, props), and then use props.propName to access the value of the prop.
Props are Immutable: Props should be treated as read-only. You should never modify a prop directly within the child component. Props are intended to be a one-way communication from parent to child.
Default Props: You can specify default values for props using the defaultProps property if a prop is not provided.
Default Props Example
import React from "react"function Greeting(props) { return <p>Hello, {props.name}!</p>}// Setting default propsGreeting.defaultProps = { name: "Guest", // Default value for "name" prop if not provided}function App() { return ( <div> <Greeting /> {/* Will display "Hello, Guest!" */} <Greeting name="Alice" /> {/* Will display "Hello, Alice!" */} </div> )}
export default App;
In this example, we set a default value for the name prop using defaultProps in the Greeting component.
Props are a fundamental concept in React that enables you to create reusable and dynamic components by passing data and behavior from parent components to child components. By following these rules and examples, you can effectively use props in your React applications.
Passing functions via props in React is a powerful and common practice that allows you to achieve various functionalities and patterns in your application. This approach is fundamental for enabling communication and interaction between parent and child components.
Component Communication: It facilitates communication between parent and child components. You can pass functions from a parent component to a child component to enable the child component to trigger actions or send data back to the parent.
Reusability: It promotes component reusability. By passing functions as props, you can create child components that are more generic and can be used in various contexts, as they rely on callbacks provided by props.
State Management: It’s essential for managing state in parent components. Parent components can pass down functions to update their state, allowing child components to control or modify data in the parent.
Event Handling: It’s used for handling user interactions. Functions passed as props can be triggered in response to events like button clicks, form submissions, or user input changes.
Here’s how passing functions via props works in React:
Define the Function in the Parent Component: In the parent component, define the function you want to pass to the child component. This function typically performs some action or updates the parent’s state.
Pass the Function as a Prop: When rendering the child component, pass the function as a prop by assigning it to an attribute on the child component.
Access and Use the Function in the Child Component: In the child component, you can access the function via the props and call it when needed. This allows the child component to trigger actions in the parent component.
Best Practices and Must-Knows
Callback Naming:
Choose clear and descriptive names for your callback props to improve code readability and maintainability.
Avoid Anonymous Functions:
Avoid passing anonymous functions directly as props, as this can lead to unnecessary re-renders. Instead, define the function in the parent component and pass it as a reference.
Be cautious about the context in which functions are called. If a function relies on the parent’s state or context, ensure that the context is preserved when passing it as a prop.
Functional Components:
In functional components, use the useCallback hook to memoize functions to prevent unnecessary re-renders when the parent component updates.
Document Props:
Document the props that are functions in your component’s documentation or with comments to make it clear how they should be used.
Prop Validation: - [ ] You can use PropTypes or TypeScript to specify and validate the expected props types, including functions, which can help catch potential issues during development.
Here’s a simple example illustrating the passing of a function via props:
In this example, the incrementCount function is defined in the parent component and passed down to the child component as the onIncrement prop. When the button in the child component is clicked, it triggers the onIncrement function, updating the count in the parent component.
| Props | State |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | --- | --- |
| Input or argument passes to a component. kind of similar to function arguments | Internal Data managed by a component that can change over time. kind of similar to local variables |
| Treat this as immutable Don’t change props in the children please.❌ | States on the other hand are mutable, you can change them to your need✅ | | |
React provides a special children prop that allows you to pass components or elements as children to a parent component. This is a powerful and flexible feature that is commonly used in React applications to create reusable and composable components.
🔖 The children prop allows you to pass React components, elements, or even plain text as children to a parent component. You can use it within the parent component’s JSX to render these children elements.
[/] Implicitly Defined:
🔖 React provides the children prop by default for all components.
🔖 You don’t need to explicitly define it in your component’s prop types or as a function parameter.
[/] Nested Components:
🔖 You can nest components within each other by placing one component as a child inside another component’s opening and closing tags. These nested components are then accessible via the children prop.
[/] Accessing and Rendering:
🔖 To access and render the children elements, you can simply use {props.children} within the parent component’s JSX. This will render whatever elements were passed as children.
In this example, the ParentComponent receives and renders its children inside a div. When App renders ParentComponent, it includes two paragraphs as children, which are rendered within the div inside ParentComponent.
[/] You can pass multiple children to a parent component, and they will be treated as an array. You can map over them, filter them, or use any array methods as needed.
➡️ Conditional Rendering:
[/] You can conditionally render children based on certain conditions within the parent component. This allows you to have dynamic and flexible layouts.
➡️ Prop Drilling:
[/] Be cautious of prop drilling when using deeply nested components. If multiple intermediate components don’t need the children prop but have to pass it down, it can lead to complex and less maintainable code. In such cases, consider using React context or a state management library like Redux.
➡️ Default Props:
[/] You can provide default children by assigning a default value to the children prop in your component. This can be useful when you want to ensure that there are always some default elements present.
➡️ Composition:
[/] The children prop enables component composition, which is a fundamental concept in React. It allows you to build complex UIs by combining simple, reusable components.
➡️ Other Default Props:
[/] React does not provide any other default component-specific props like children. The children prop is unique in that it’s implicitly available to all components, and it’s used for passing child components and elements.
Object.assign() is another method for creating a new object with updated properties. It takes the target object (where properties are copied to) and one or more source objects (from which properties are copied).
Forms are a fundamental part of web development, allowing users to input data and interact with web applications. React provides a powerful way to handle forms using controlled components.
React forms are slightly different from regular HTML forms. Instead of reading values from the DOM directly, React uses a process called "controlled components." This means the form input element values are controlled by React's state.
To create a form in React, you start by adding an HTML <form> element to your component’s JSX. This element will contain all your form inputs and elements.
React allows you to use various form input elements such as text inputs, checkboxes, radio buttons, selects, and more. Each input element can be controlled by React state, ensuring that the form data is synchronized with your component’s state.
To handle form submission, attach an onSubmit event handler to the form element. In the event handler, you can prevent the default form submission behavior, process the form data, and perform any necessary actions.
<form onSubmit={handleSubmit}> {/* Form inputs go here */} <button type="submit">Submit</button></form>
Controlled components in React are a key concept in form handling. They ensure that the form data is controlled by React state. To create a controlled component:
➡️ Initialize a state variable to hold the form data.
➡️ Set the value of the form elements to the state variable.
➡️ Provide event handlers (onChange) to update the state when the user interacts with the form elements.
Form validation is essential to ensure that the data submitted by users is correct and meets certain criteria. You can perform validation in your event handlers and provide feedback to the user.
Debouncing is a technique to limit the number of times a function gets executed over time. When applied to inputs, debouncing can improve performance, especially in scenarios where you want to perform some real-time operations based on the input value, like fetching suggestions in a search box.
➡️ : For text inputs, especially search boxes, use a debounce function to delay processing the input until the user stops typing.
[p] Avoid Inline Validations:
➡️ Inline validations (validating as the user types) can be disruptive. Consider validating onBlur (when the user moves to the next input) or on form submission.
[p] Always Use e.preventDefault() in Form Submits:
➡️ By default, forms will refresh the page on submission. To prevent this default behavior, always use e.preventDefault().
[p] Resetting a Form:
➡️ To reset a form, set the state to its initial value.
[p] Uncontrolled Components & useRef:
➡️ In some cases, you might want to use uncontrolled components (inputs not controlled by React state). Use the useRef hook to access these inputs. However, controlled components are more in the “React” way and are recommended.
[p] Third-party Libraries:
➡️ If your form logic becomes too complex, consider using libraries like Formik or React Hook Form.
[p] Accessibility (a11y):
➡️ Ensure that your form elements have proper labels (use the label tag or aria-label attribute). This is crucial for screen reader users.
useRef is a React hook that provides a mutable ref object. Unlike useState, it doesn’t cause re-renders when its value changes. Instead, it allows you to interact with and store references to DOM elements or components across renders. This makes it useful for managing imperative logic and side effects in your components.
import { useRef } from 'react';function MyComponent() { // Create a ref object const myRef = useRef(initialValue); // Access the current value of the ref const currentRefValue = myRef.current; return ( // JSX and component logic );}
import { useRef, useEffect } from "react"function FocusInput() { const inputRef = useRef(null) useEffect(() => { // Set focus to the input element on mount inputRef.current.focus() }, []) return <input ref={inputRef} />}
Sometimes when you are using the mirage server, you might end up facing with redirection issues,
this is likely to happen if you are using react router v 6.16.4
Mirage redirection problem
Your code might look like this , and you be asking yourself why it is not workin g
const isLoggedIn = falseif (!isLoggedIn) { // This might not work in Mirage Server 🥲 throw redirect("/login")}
To fix the this annoying our of proportion error you can simply set the body to true before throwing your erro
const redirection: any = redirect("/login")redirection.body = truethrow redirection
💡 The actual UI you intend to render. If children suspends while rendering, the Suspense boundary will switch to rendering fallback.
➡️ fallback:
💡 An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to fallback when children suspends, and back to children when the data is ready. If fallback suspends while rendering, it will activate the closest parent Suspense boundary.