React Render Showcase

This project demonstrates how React re-renders components in various scenarios, highlighting key concepts such as state updates, prop changes, and context usage. It provides interactive examples to help developers better understand React's rendering behavior and optimize performance in their applications.

Features

• Visualize component re-renders in real-time.
• Compare different scenarios such as state updates, parent-to-child prop changes, and context propagation.
• Tips and insights to avoid unnecessary re-renders.

Getting Started

Follow these steps to run the project locally:

Prerequisites

• Node.js
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/leonardoxoliveira/react-render-showcase.git
   cd react-render-showcase

2. Install dependencies:

   npm install

   or

   yarn

Running the Development Server

Start the development server using Vite:

npm run dev

or

yarn dev

The application will be accessible at http://localhost:5173 in your browser.

Building for Production

To build the project for production:

npm run build

or

yarn build

Previewing the Production Build

To preview the production build locally:

npm run preview

or

yarn preview

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Contributing

Contributions are welcome! Feel free to submit issues or pull requests to enhance the project.

License

This project is licensed under the MIT License.