This is an idea of implementing a toggle button with useOptimistic. useOptimistic is a React experimental hook that allows apps to update UI optimistically while the actual state updates with async operation. You can learn more about it with those links.

• useOptimistic - React
• Data Fetching: Server Actions and Mutations | Next.js

Here is the main code of my component.

import { useOptimistic, useRef } from 'react'
import { Button } from './ui/button'
import { HeartIcon, HeartFilledIcon } from '@radix-ui/react-icons'

export function FavoriteButton({
  isFavorite,
  placeId,
}: {
  isFavorite: boolean
  placeId: string
}) {
  
  async function formAction(formData: FormData) {
    addOptimisticFavorite(!isFavorite)
    formRef.current?.reset()
    const placeId = formData.get('placeId')
    await fetch(`/api/favorite`, {
      method: 'POST',
      body: JSON.stringify({ placeId }),
    })
  }

  const [optimisticIsFavorite, addOptimisticFavorite] = useOptimistic(
    isFavorite,
    (state) => !state,
  )
  return (
    <form action={formAction} ref={formRef}>
      <input type="hidden" value={placeId} name="placeId" />
      <Button variant="ghost" type="submit" onClick={handleClick}>
        {optimisticIsFavorite ? <HeartFilledIcon /> : <HeartIcon />}
      </Button>
    </form>
  )
}

optimisticFavorite toggles immediately after users click the button and gets rolled back when the component receives isFavoritewhose value is different from optimisticFavorite. Otherwise, optimisticFavorite keeps the client-side state.

In my real code, unfortunately, I needed to deal with two different cases to update isFavorite in my app, which is not ideal, and the code gets a little messy. Please visit the link below if you’re interested.

ai-gourmet-navigator/src/components/favorite-button.tsx at main · AI-Gourmet-Navigator/ai-gourmet-navigator

That’s it! Thank you for reading :)

What we want

This is pretty simple. We want to re-order a provided linked list in the opposite direction.

Strategy

Go through each element and replace the value of next from the next element’s address with the previous element’s.

This requires us to handle two operations: 1) changing the value of next of each element and 2) tracking which element we’re updating and what element comes next.

Code

I think there are two tricky things when it comes to coding: 1) storing the next element to modify before updating curr.next, and 2) returning prev instead of curr as we update curr at the last of the while loop.

/**
 * Definition for singly-linked list.
 * class ListNode {
 *     val: number
 *     next: ListNode | null
 *     constructor(val?: number, next?: ListNode | null) {
 *         this.val = (val===undefined ? 0 : val)
 *         this.next = (next===undefined ? null : next)
 *     }
 * }
 */

function reverseList(head: ListNode | null): ListNode | null {
    let [prev, curr] = [null, head]
    while(curr){
      const next = curr.next
      curr.next = prev
      prev = curr
      curr = next
    }
    return prev
    
};

Question

You're given an array, nums, of arbitrary length. Your task is to return a new array, ans, that is twice as long as nums. The new array, ans, should satisfy the following conditions: ans[i] == nums[i] and ans[i + n] == nums[i], where 0 ≤ i < n.

Modular Arithmetic

Modular arithmetic is a mathematical system that operates on integers by focusing on the remainder. The expression, x mod N, asks for the remainder of x when divided by N. For example, 13 mod 5 results in 3, because 3 is the remainder when 13 is divided by 3. a ≡ b (mod N) means that they share the same remainder when divided by N — for instance, 17 ≡ 8 (mod 3). In other words, modular arithmetic is a system that groups integers with their reminders.

Solution Approach

Let’s say the nums = [1, 2, 3]. The ans should be [1, 2, 3, 1, 2, 3] = [nums[0], nums[1], nums[2], nums[0], nums[1], nums[2]]. Therefore in general, we want to get an array of [nums[0], nums[1],,,, nums[nums.lenght-1], nums[0], nums[1],,,, nums[nums.lenght-1]].

Here is the time to employ modular. Let’s set i as an arbitral index of nums, N as the length of nums, and idx as an arbitral index of ans. Then we can get idx with i mod N. With the example above, 0 mod 3 = 3 mod 3 = 0, 1 mod 3 = 4 mod 3 = 1, 2 mod 3 = 5 mod 3 = 2.

Implementation

% is the operator that gets reminders in JavaScript.

/**
 * @param {number[]} nums
 * @return {number[]}
 */
var getConcatenation = function(nums) {
    let ans = []
    for(let i = 0; i < nums.length * 2 ; i ++){
        const idx = i % nums.length // i mod nums.length
        ans.push(nums[idx])
    }
    return ans
};

Generalization

What I like about the solution most is that it’s easy to generalize the number of concatenations. The question asks to repeat two times, but we can easily modify the code to repeat any number of times you want.

/**
 * @param {number[]} nums
 * @param {number} x // the number of repetition
 * @return {number[]}
 */
var getConcatenation = function(nums, x) {
    let ans = []
    for(let i = 0; i < nums.length * x; i ++){
        const idx = i % nums.length // i mod nums.length
        ans.push(nums[idx])
    }
    return ans
};

⚠️ This is not a recommended answer, but I just wanted to say there is a way to utilize Math. You can find a model answer here.

Ref

Modular Arithmetic | Brilliant Math & Science Wiki

· Motivation
∘ Issue
∘ React Team’s Solution: Put data fetching logic on the server
· Server Side Rendering vs React Server Components
∘ Server Side Rendering (SSR)
∘ React Server Components
· Server Component Features
∘ Zero Effect on the Bundle Size
∘ Direct Access to the Backend Resources
∘ Automatic Code Splitting
∘ Server Components require users’ decision
∘ Server Components provide modern UX with a server-driven mental model
· Ref

Motivation

Issue

The React team wants to create apps with good user experience, cheap maintenance, and fast performance co-existing.

In general, having two of them in one project is comparatively more straightforward, but having all of them is pretty challenging.

Example: Good user experience and fast performance

With the code snippet, the app can render all components simultaneously and doesn’t suffer from the request waterfall, as it gets all data in one request. However, this code sacrifices the cheap maintenance because each component's API responses are coupled.

function ArtistPage({artistId}){
const stuff = fetchAllTheStuffJustInCase()
 return (
  <ArtistDetails artistId={artistId} details={stuff.details} />
   <TopTracks artistId={artistId} details={stuff.topTracks} />
   <Discography artistId={artistId} details={stuff.discography} />
  </ArtistDetails>
 )
}

// https://youtu.be/TQQPAU21ZUw&t=4m12s

🗒️ This code reminds me of the Easier to Change (ETC) principle provided in The Pragmatic Programmer. According to the book, “Good design is easier to change than bad design.” It also says, “Decoupled code is easier to change.”

The code below can reduce the maintenance cost but causes a so-called request waterfall, sacrificing the performance speed. In addition, the app no longer renders all components simultaneously, and now they all depend on each request order.

// Ideal way
function ArtistPage({artistId}){
 return (
  <ArtistDetails artistId={artistId} />
   <TopTracks artistId={artistId} />
   <Discography artistId={artistId} />
  </ArtistDetails>
 )
}

function ArtistDetails({artistId}) {
 const details = fetchDetails(artistId)
 // ...
}

function TopTracks({artistId}) {
 const topTracks = fetchTocpTracks(artistId)
 // ...
}

function Discography({artistId}) {
 const discography = fetchDiscograhy(artistId)
 // ...
}

// https://youtu.be/TQQPAU21ZUw&t=5m20s

🗒 I like this part because I can sense the strong eagerness to break through what we call impossible.

React Team’s Solution: Put data fetching logic on the server

Server Side Rendering vs React Server Components

Server Side Rendering (SSR)

SSR is a technique that serves an initial HTML when the first page loads. Once the first HTML is loaded, it is required to download/parse/execute Client Components.

React Server Components

React Server Components are not interactive with the client side. Client Components always take responsibility for interacting with users and trigger re-fetch Server Components trees corresponding to the user’s actions. Notably, the client-side state is preserved when the re-fetch. We can do this with Server Components because Server Components don’t render to HTML, but they render into a special format.

Here is an example of where the client states are preserved when the re-fetch with Next.js. The search input appears only when the search input state is true, and the to-do list is filtered by the filter query controlled on the server side.

cf) Here is how Next.js explains the interaction between Server Components and Client Components. Next.js calls the special format React Server Component Payload.

React Foundations: Server and Client Components | Next.js

Server Component Features

Zero Effect on the Bundle Size

We can reduce dependencies downloaded to the client by moving some heavy dependencies components to the server.

⚠️ Not exactly HTML files (as Server Components render into a special format), but I mention only HTML here for the sake of ease.

Direct Access to the Backend Resources

Because Server Components are rendered on the server side, they can access the server-side resources directly.

// Example 1

import { resolve, join } from 'path';
import { readdir, readFile } from 'react-fs';
import marked from 'marked';

const folder = resolve(__dirname + '/../posts');

function Blog() {
 return readdir(folder).map(name => 
  <article key={name}>
   {/* Access the file system directly without creating any API */}
   {marked(readFile(join(folder, file), 'utf8'))} 
  </articke>
 );
}

// https://youtu.be/TQQPAU21ZUw&t=37m57s

// Example 2

import marked from 'marked';
import { db } from './db';

function Blog() {
 return db.posts.getAll().map(post => 
  <article key={post.id}>
   {marked(post.html)}
  </article>
 )
}

// https://youtu.be/TQQPAU21ZUw&t=38m05s

Automatic Code Splitting

Server components allow for the loading of only the required code. This means that server components are not downloaded to the client, and even client components that are not being used do not need to be downloaded.

// Example

import EditToobar from './EditToolbar.client';

function Comment({ comment, currentUser }) {
 const canEdit = (
  currentUser.isAdmin ||
  currentUser.id === comment.author.id
 );
 return (
  <Box>
  {/* EditToonar is downloaded only when canEdit === true */}
   {canEdit && <EditToolbar />}
   <p>{comment.text}</p>
  </Box>
 )
}

// https://youtu.be/TQQPAU21ZUw&t=41m25s

This is questionable with Next.js, as I found client components not rendered in the initial render when I inspected the source after running npm run build.

Server Components require users’ decision

Server Components let you decide the Client and Server Components tradeoff for every concrete use case.

Rendering: Composition Patterns | Next.js

🗒️ I think this is a double-edged sword feature as we have to understand the ins and outs of React, including both Server Components and Client Components (and Shared Components), to decide which to use in each case. In other words, it all depends on developers to make the most of the server components or to make them waste treasures.

Server Components provide modern UX with a server-driven mental model

Server Components enable developers to create modern and app-like user interfaces in an old-school way.

// Example

import SearchInput from './SearchInput.client';

function SearchResults({searchText}) {
 const results = fetch('/search?q' + searchText).json();
 return (
  <>
   {/*This component triggers re-fetch of the server tree*/}
   <SearchInput /> 
   <ul>
    {results.map(result => 
     <li key={result.id}>{result.text}</li>
    )}
   </ul>
  </>
 )
}

// https://youtu.be/TQQPAU21ZUw&t=44m45s

Ref

• Introducing Zero-Bundle-Size React Server Components - React
• rfcs/text/0188-server-components.md at main · reactjs/rfcs

The whole demo code is available here.

Exploring “Data Fetching with React Server Components” with Next.js was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Contents:

• What is database?
• Work with PostgreSQL
  1. Install PostgreSQL
  2. Create Database
  3. Create tables
  4. Insert into: How to insert values
  5. Select: How to get table values
  6. Alter: How to add another column to an existing table
  7. Update: How to update existing row values
  8. Join: How to connect tables
  9. Delete : How to delete rows
  10. Drop table: How to delete tables

What is database?

A database is an organized collection of structured data stored electronically, typically managed by a DBMS, forming a database system (What is database software?).

There are two main DBMS: Relational databases and NoSQL/Non relational database. I will focus more on relational databases in this article as PostgreSQL is a relational database.

Relational database is consist of tables with columns and rows. Columns hold specific data types and fields store attribute values. Rows represent a collection of related values. Rows can be so called a primary key, an unique identifier and relationships between rows in different tables are established using foreign keys (What is a Relational Database?).

SQL allows us to communicate with relational databases.

NoSQL/Non relational databases are databases which store data in a different way from relational databases. There are variety of ways to store data such as document, key-value, wide-column, and graph (What is NoSQL?).

Work with PostgreSQL

1. Install PostgreSQL

Here is a way to download PostgreSQL on MacOS with homebrew.

Preparation

0. (Optional) Download GUI for PostgreSQL: I chose pgAdmin 4 simply because it’s free (What are the best Mac OS X GUIs for PostgreSQL?)

1. make sure homebrew is updated: brew update
2. confirm that everything is working fine: brew doctor

Installation

1. brew install postgresql
   Check the command to start postgresql service. It was brew services start postgresql@14 in my case.

2. Create Database

1. Start the service: brew services start postgresql@14
   You will see a success message like Successfully started ‘postgresql@14’ (label: homebrew.mxcl.postgresql@14)
2. Create a database: createdb ‘test’
3. (Optional for GUI) create an user: createuser testuser
4. (Optional for GUI) open pgAdmin4
5. (Optional for GUI) Click “Add New Server”

6. (Optional for GUI) Input the server name (e.g. localhost)

7. (Optional for GUI) click connection tab

8. (Optional for GUI) Input database name, user name, and address

9 (Optional for GUI) You will see Explorer

10. Connect to the database: psql 'test' (and \q to exit)

3. Create tables

Make sure you’ve connected the target database before creating tables.

Syntax:

CREATE TABLE table_name (column_1 datatype, ..., column_n datatype);

# Example
CREATE TABLE users (name text, age smallint, birthday date);

You can find various data types provided by PostgreSQL here.

Chapter 8. Data Types

Then you will find the table with GUI, or you can check with \d command with Terminal.

# Command result
 
List of relations
 Schema | Name  | Type  |    Owner     
--------+-------+-------+--------------
 public | users | table | ownername
(1 row)

4. Insert into: How to insert values

Syntax:

INSERT INTO table_name (column_1, ..., column_n) VALUES (value_1, ... value_n);

# Example
INSERT INTO users (name, age, birthday) VALUES ('Hermione', 10, '1979-09-19');

5. Select: How to get table values

Basic syntax:

SELECT column_1, ..., column_n FROM table_name;

# Example1
SELECT name, age, birthday FROM users;

# Result1
 name     | age |  birthday  
----------+-----+------------
 Hermione |  10 | 1979-09-19

# Example2
SELECT name FROM users;

# Result2
   name   
----------
 Hermione

When you want to select all columns:

SELECT * FROM table_name;

# Example
SELECT * FROM users;

# Result
 name     | age |  birthday  
----------+-----+------------
 Hermione |  10 | 1979-09-19

You can find some conditional selections:

• SQL WHERE Clause
• SQL ORDER BY Keyword

Also we have some SQL functions:

SQL COUNT(), AVG() and SUM() Functions

6. Alter: How to add another column to an existing table

Syntax:

ALTER TABLE table_name ADD column_name datatype;

# Example
ALTER TABLE users ADD house text;

# Result
   name   | age |  birthday  | house 
----------+-----+------------+-------
 Hermione |  10 | 1997-09-19 | 
 Ron      |  10 | 1980-03-01 | 

7. Update: How to update existing row values

Syntax:

UPDATE table_name SET column_name1 = column_value1 WHERE column_name2 = column_value2;

#Example
UPDATE users SET house = 'Gryffindor' WHERE name = 'Hermione';

# Result
   name   | age |  birthday  |   house    
----------+-----+------------+------------
 Ron      |  10 | 1980-03-01 | 
 Hermione |  10 | 1997-09-19 | Gryffindor

8. Join: How to connect tables

Syntax:

SELECT * FROM table1_name JOIN table2_name ON table1_name.primary_key = table1_name.foreign_key

Suppose we have tier table below and want to get users information with rank data:

CREATE TABLE tier (id serial NOT NULL PRIMARY KEY, rank text, name text UNIQUE NOT NULL);

SELECT * FROM tier
 id | rank |   name   
----+------+----------
  1 | s    | Hermione
  2 | s    | Ron
  3 | s    | Harry
  4 | a    | Draco

Then the SQL query will be:

SELECT name, age, birthday, house, rank FROM users JOIN tier ON users.name = tier.name;

# Result
   name   | age |  birthday  |   house    | id | rank |   name   
----------+-----+------------+------------+----+------+----------
 Hermione |  10 | 1997-09-19 | Gryffindor |  1 | s    | Hermione
 Ron      |  10 | 1980-03-01 | Gryffindor |  2 | s    | Ron
 Harry    |  10 | 1980-07-31 | Gryffindor |  3 | s    | Harry
 Draco    |  10 | 1980-06-05 | Slytherin  |  4 | a    | Draco

9. Delete : How to delete rows

Syntax:

DELETE FROM table_name WHERE your conditoin;

# Example
DELETE FROM users WHERE name='Voldemort';

10. Drop table: How to delete tables

Syntax:

DROP TABLE table_name;

# Example
DROP TABLE users;

That’s it! Thank you for reading :)

PostgreSQL 101: From what’s database to basic SQL queries was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pre-requirements: install postgresql
OS: macOS

1. psql postgres to enter postgres
2. Create an user with CREATEDBpermission: CREATE ROLE <username> WITH LOGIN PASSWORD '<password>' CREATEDB;
3. go to your app’s root folder
4. make sure the provide is ‘postgresql’ at prisma/schema.prisma

datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
}

5. Database url has the following structure: postgresql://username:password@localhost:5432/database-name
⚠️ If you don’t use the default port number, replace from 5432 to yours.

6. npx prisma migrate dev --name initial

Special thanks: https://www.codementor.io/@engineerapart/getting-started-with-postgresql-on-mac-osx-are8jcopb

Part1: Migrated app router from page router

Part2: Migrated router API

Part3: Applied some other Next.js v13 updates

Optional: Updated NextAuth from v3 to v4

Optional: Updated Redux from classical Redux to Redux Toolkit Query

Vague error messages

Error: React Context is unavailable in Server Components

You have to put "use client" to use "SessionProvider" provided by nextAuth because it uses React Context behind the scene.

I read some articles setting up NextAuth with Next.js and found that the current common practice is creating a provider as a client-side component and wrapping with it at app/layout.js rather than using SessionProvider directly. This approach applies to other providers which also require use client.

• Setup and Use NextAuth.js in Next.js 13 App Directory 2023
• Add NextAuth to NextJS 13 and Authenticate with GitHub

TypeError: (0 , _react.createContext) is not a function

This is another pattern that you have to put "use client”. If you see this message, most likely you’re using redux hooks/utils in server components. One tricky thing is that Redux doesn’t specify what file causes this error.

TypeError: Cannot read properties of undefined (reading ‘prototype’)

This error came from semantic-ui-react and also told me to put "use client". So far, you have to put "use client" at all files which include semantic-ui-react components. Alternatively, you can create client components for each semantic-ui-react component. But I haven’t applied this approach yet.

"use client"
import { Grid as SemanticGrid } from "semantic-ui-react";

const Grid = (props) => {
  return <SemanticGrid {...props}>{props.children}</SemanticGrid>
}

TypeError: Cannot read properties of undefined (reading ‘select’)

This is more likely because your first argument of updateQueryData (endpoint name) is incorrect. In the case below, it should be getCartItems to match the actual query I defined.

Redux Essentials, Part 8: RTK Query Advanced Patterns | Redux

Error: [Immer] The first or second argument to `produce` must be a function

I got this error because I forgot to put the second argument for updateQueryData (cache key arguments).

Different CSS files loading b/w production and dev

After deploying on vercel, I found there is a wired padding provided by semantic ui css file.

Here is how Next.js optimize css files during the build process. My global.css file cannot always override semantic ui stylings.

When building for production with next build, CSS files will be bundled into fewer minified .css files to reduce the number of network requests needed to retrieve styles.

CSS Modules

The quick and dirty way is put !important for those stylings you want to override stylings. But I think a better way in my case is to add stylings with styled-components.

No redux-next-wapper for Next.js 13 so far

Because of it, I decided to use rest api more often than before to keep most of data on the server side rather than saving it in local storage.

Usage with Next.js 13? · Issue #494 · kirill-konshin/next-redux-wrapper

I tried Optimistic updates for a better user experience.

Optimistic Updates with RTK Query

That’s it! It was more difficult for me to catch/handle errors than usual because most of libraries still assume React ecosystem. Hope it helps someone as well. Please let me know if you have/find any better solution. Thank you for reading :)

code