In command prompt enter the command npm i pinia-plugin-persistedstate Add the plugin to pinia import { createPinia } from ‘pinia’ import piniaPluginPersistedstate from ‘pinia-plugin-persistedstate’ const pinia = createPinia() pinia.use(piniaPluginPersistedstate) Add the persist option to the store you want to be persisted: import { defineStore } from ‘pinia’ export const useStore = defineStore(‘store’, { state: ()… Continue reading How to persist Pinia variables in vue js
Category: JavaScript
Handling String Comparison Issues Caused by HTML Encodings and Line Breaks
Overview During implementation, we encountered an issue where string values were not matching correctly due to inconsistencies in how they were stored and compared. Specifically: Some values contained HTML entities like < and > instead of < and >. Some values included HTML line breaks (<br>), carriage returns, or multiple spaces. As a result, direct… Continue reading Handling String Comparison Issues Caused by HTML Encodings and Line Breaks
Exploring GraphQL Queries in React
Why GraphQL with React? GraphQL allows you to request exactly the data you need, reducing over-fetching and under-fetching issues common in REST. React’s component-based architecture pairs beautifully with GraphQL’s declarative data-fetching approach, making it easier to manage state and render UI based on server responses. Install Apollo Client npm install @apollo/client graphql Configure Apollo Client… Continue reading Exploring GraphQL Queries in React
Forking Repo in github
Forking a repository on GitHub creates a personal copy of someone else’s repository under your own GitHub account. This allows you to experiment with changes or contribute to the original project without affecting it directly. Here’s a concise guide to forking a repository on GitHub: Steps to Fork a Repository on GitHub: Navigate to the… Continue reading Forking Repo in github
Styling Console Logs
Provided is a sample code used to style the console logs console.log(‘%cStyled Log’, ‘color: blue; font-size: 20px;’);
Use Ant Design React UI component library in react project
Use the following script sample to use Ant design component import React from ‘react’; import { DatePicker } from ‘antd’; const App = () => { return <DatePicker />; }; export default App;
Install Ant Design UI React Component library using npm
Add the following command to install Ant Design UI React component to a react project npm install antd –save
compare Dates
Comparing the “date” element of each format and exclude any “time” element. Then with both dates converted to milliseconds, simply compare the values. You could do something like this. If dates are equal it returns 0, if the first date is less that the second then return -1, otherwise return 1. Javascript function compareDates(milliSeconds, dateString)… Continue reading compare Dates
Mastering Performance in React with useMemo
React is a powerful library for building dynamic user interfaces, but as your application grows, performance can become a concern. One of the tools React provides to optimize performance is the useMemo hook. In this article, we’ll explore what useMemo is, why it’s useful, and how to implement it effectively in your React projects. What… Continue reading Mastering Performance in React with useMemo
React Suspense for Data Fetching
Why This is Interesting Suspense Magic: React Suspense allows the component to “suspend” rendering while the data is being fetched, showing a fallback UI (like “Loading…”) until the data is ready. This eliminates the need for manual loading states with useState and useEffect. Caching Twist: The fetchUserData function uses a Map to cache results, so… Continue reading React Suspense for Data Fetching