Product CRUD Page - NextJS Single Page Application with OrderCloud as backend

Disclaimer: The code in the useEffect shared in this blog post is not optimized and is a work in progress! Will add a detailed blog once I'm convinced that the code is optimized and effective!

Actual blog:

In this blogpost I cover the changes I made while developing the product listing, add and delete functionalities in a single page application using NextJS and OrderCloud with TypeScript code. This design is based on OrderCloud HeadStart design as specified in my earlier blog

I used the same technical design as OrderCloud HeadStart project since it fit my requirement well and in case of your application, you might want to choose a different technical design!

In this blog post, I just cover a few concepts I implemented so far at the time of this writing.

A high-level overview:

Although each block in the above diagram by itself is a separate concept, I will cover as much of my understanding/basics in upcoming blogs but the above diagram is a summary of the NextJS application low-level design flow.

As far as I analysed the pattern, the component should communicate with the corresponding hook where a Single Page Application effect is desired.

useEffect hook

The useEffect hook is utilised to indicate state change and trigger front-end view changes. Although this could be done is several other "effective" ways, useEffect is one of the approaches.

One thing I realised is, if you don't use useEffect and useMemo hooks properly, you might get into infinite loops. I got into such scenarios and adjusted code by providing proper variable dependency. Also, in one scenario, I felt useMemo seemed expensive and so removed the same.

List component refresh

Another challenge I faced was to trigger parent component refresh when user triggers an add or delete in the child component. This is where the above useEffect hook was helpful. In case of delete, I implemented the view refresh as follows (in conjunction with the useEffect refreshKey variable dependency). Although this might not be the best approach, this does the job for me now in terms of refreshing the list:

useState hook

The useState hook is mostly used in conjunction with the useEffect hook to track state and do necessary refresh. Usually an initial state is provided and based on other events, the state is incremented or adjusted to indicate useEffect to react:

useEffect and useState

useEffect could prove costly; I just added a counter within a useEffect to see how often it triggers and this is what I saw. So, I would use the hooks very judiciously in my applications:

useCallback in action for data insert without page refresh:

Data inserted to OrderCloud back-end on insert/delete from NextJS application: