Bug: creating the initial state about react

[Dave-Patsy]

this is an example of passing the initializer function to set state from the react docts beta

import { useState } from 'react';

function createInitialTodos() {
  const initialTodos = [];
  for (let i = 0; i < 50; i++) {
    initialTodos.push({
      id: i,
      text: 'Item ' + (i + 1)
    });
  }
  return initialTodos;
}

export default function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);
  const [text, setText] = useState('');

  return (
    <>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button onClick={() => {
        setText('');
        setTodos([{
          id: todos.length,
          text: text
        }, ...todos]);
      }}>Add</button>
      <ul>
        {todos.map(item => (
          <li key={item.id}>
            {item.text}
          </li>
        ))}
      </ul>
    </>
  );
}

I am not sure why createCards() function is not initializing properly

[Werter12]

Hi @Dave-Patsy
Looks like your question more Next.js related rather than react. When the client props don't match server props after hydration - it's means that server pre-rendering took place. This is a part of optimisation that Next.js doing even for "client" components. So, basically "client" components is pre-rendered due to ssr. If you want completely "client" component. You should lazily import component with option ssr: false.

import dynamic from 'next/dynamic'

const Memory = dynamic(() => import('./components/memory'), { ssr: false });

I've did it an the problem is gone