SQL Query runner 🔗
This is a web-based SQL query runner demo application built using react
, along with Tailwindcss
for styling, antd
for table and codemirror
for sql editor. It allows users to execute SQL queries in a web-based editor and see the results generated in the form of table.
The mock data used in the application is obtained from graphql-compose-examples repo.
FCP - 0.9s
LCP - 1.9s
Below is the screenshot of the lighthouse report of the webapp
LCP - 0.59s
Full Load Time - 0.81s
The GTmetrics report can be found here. Below is the screenshot for the same:
Several optimizations have been done in this React project which are:
-
Implemented Caching in Data Fetching Hook: Reduced redundant API calls by caching responses, leading to faster data retrieval and less server load.
-
Used
useMemo
for Expensive Computations: Optimized performance by memoizing computationally intensive operations, preventing them from being recalculated on every render. -
Applied
useCallback
for Functions: Stabilized function identities across renders, reducing unnecessary re-renders of child components receiving these functions as props. -
Dynamically Imported
antd's Table
Component with React Lazy: Improved initial page load speed by loading theTable
component from antd only when needed, effectively reducing the initial JavaScript bundle size. -
On-Demand Data Fetching: The data is only fetched from the API when requested by the user, thus decreasing the initial load times of the app and saving unnecessary API calls.