Aleksey Solovyev

JSON.parse возвращает простые объекты, которые React не может отрендерить.
Вместо хранения React-элементов храните минимальные данные, необходимые для генерации компонентов. Генерируйте элементы на основе этих данных при рендере.

Код от AI:

import React from 'react';

const initialData = JSON.parse(localStorage.getItem('components')) || [];

export function App() {
  const [componentsData, setComponentsData] = React.useState(initialData);

  React.useEffect(() => {
    localStorage.setItem('components', JSON.stringify(componentsData));
  }, [componentsData]);

  function addComponent() {
    setComponentsData(prev => [
      ...prev,
      { id: Math.random().toString(36).slice(2), content: Math.floor(Math.random() * 100) }
    ]);
  }

  const components = componentsData.map(item => (
    <div key={item.id}>{item.content}</div>
  ));

  return (
    <>
      <button onClick={addComponent}>click</button>
      <div>{components}</div>
    </>
  );
}

ps и если хотите разобраться как работать с чем-то, то посмотри как это написано у других - useLocalStorage

Скорее всего вам будет полезно узнать о Compound components. Что-то такое:

<List>
  <List.Item>
     <List.Checkbox ...> Some text
  </List.Item>
  <List.Item>
     Some text <List.Checkbox ...> 
  </List.Item>
  <List.Item>
     <List.Dropdown ...>
  </List.Item>
</List>

Вот реальный пример из chakra ui:

import { List } from "@chakra-ui/react"
import { LuCheckCircle, LuCircleDashed } from "react-icons/lu"

const Demo = () => {
  return (
    <List.Root gap="2" variant="plain" align="center">
      <List.Item>
        <List.Indicator asChild color="green.500">
          <LuCheckCircle />
        </List.Indicator>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
      </List.Item>
      <List.Item>
        <List.Indicator asChild color="green.500">
          <LuCheckCircle />
        </List.Indicator>
        Assumenda, quia temporibus eveniet a libero incidunt suscipit
      </List.Item>
      <List.Item>
        <List.Indicator asChild color="green.500">
          <LuCircleDashed />
        </List.Indicator>
        Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
      </List.Item>
    </List.Root>
  )
}

Вам надо на след. секцию скролить? Например через IntersectionObserver:
https://playcode.io/2099856
https://playcode.io/2099876 - если нужно получить ref у компонента (через forwardRef)

ps в коде можете посмотреть как можно добавить все элементы в список

А зачем вы функцию внутри функции оборачиваете в useCallback?

const openClient = () => useCallback(() => setClientIsOpen(true), []);

1. Зачем вам нужен тут Context? Добавьте useState со списком задач в main компонент и передавайте их в дочерние компоненты:

export function MainNode() {
    const [tasks, setTasks] = useState(predefinedTasks)

    const addTask = (listName, task) => {
       // ..
       // setTasks 
       // ..
    }

    const removeTask = (listNaem, taskId) => {
        // ...
        // setTasks
        // ..
    }

    
    const moveTask = (fromListName, toListName, taskId) => {
        // ..
        // setTasks
        // ..
     }

    return (
        <main>
            <TasksContainer type="Backlog" tasks={tasks.backlog} addTask={addTask}/>
            <TasksContainer type="Ready" ... />
            <TasksContainer type="InProgress" ... />
            <TasksContainer type="Finished" ... /> 
        </main>
    )
}

2. Если вам необходимо по каким-то причинам использовать context, то по аналогии с примером выше:

export const TaskContext = createContext();

export const TaskProvider = ({ children }) => {
    const [tasks, setTasks] = useState(predefinedTasks)

    const addTask = (listName, task) => {
       // ..
       // setTasks 
       // ..
    }

    const removeTask = (listNaem, taskId) => {
        // ...
        // setTasks
        // ..
    }

    
    const moveTask = (fromListName, toListName, taskId) => {
        // ..
        // setTasks
        // ..
     }

    return (
        <TaskContext.Provider value={{ tasks, moveTask, addTask }}>
            {children}
        </TaskContext.Provider>
    );
}

После чего используйте:

const TaskList = ({ listName }) => {
    const { tasks, moveTask, addTask } = useContext(TaskContext);
    // ....
}

Вам надо почитать как работает реактивность в React и разобраться почему изменения в объекте не триггерят рирендер компонента. Если по простому, то Вам нужно не просто добавлять (push) новый task в список, а полностью заменять весь объект (data) с тасками и не использовать для каждого компонента свой useState

// так не работет
tasks.backlog.push(...) 

// так работает
const tasks = {....} // объект с задачами 
const updatedTasks = { // создаем новый объект с задачами
      ...tasks,
      [listName]: [...tasks[listName], newTask]
 };
setTasks(updatedTasks) // обновляем состояние

А зачем Вы два раза пишите один и тот же код?

fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(json => console.log(json));

Перенесите запрос в родитель(index.js) и передавайте полученные данные в компоненты(props)

Что-то такое https://codesandbox.io/s/pkvw21276x