I have been depending on Context for passing state through components in React and eventually things complicated when data is become complex. Move on to beautiful Redux but it is much complex to digest. For learning Redux I have spent lots of time and Redux Toolkit, easy to use Redux, sav ed me a lot. Even though RTK is ok, it is not a simple library. I am fan of Svelte store and Vuex , Pinia store. Is there any such library for React ? I recently found Zustand a minimal store for React. Love it. 😍 Create a store Binding Updating the state Create a store Create a store using the create an d export the custom hook. import create from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) Binding In your component use the hook. The hook accepts a n arrow functions which will access to the state.
In my recent Nextjs project, need to shape object array to a different type. Mapping through the entire array in my arrow function and return the new object. Even though the return statement work. The type is still unknown. So, I have to covert the result into array of my type. Mapping Array Type export type LatestInvoiceType={ id:number; amount: number; customer:{ name:string; email:string; image_url:string; } } New Type export type LatestInvoice = { id: string; name: string; image_url: string; email: string; amount: string; }; Solution to the problem Here is my solution to the problem const latestInvoices = invoices.map(invoice => { return{ id:invoice.id.toString(), amount:invoice.amount.toString(), name:invoice.customer?.name, email:invoice.customer?.email, image_url:invoice.customer?.image_url }; }) as LatestInvoice[] ;