Анализ и ревью компонентов App.tsx и Post.tsx

Условие

Провести проверку кода файлов App.tsx и Post.tsx

// App.tsx

import React, { useEffect, useState } from "react";
import "./index.css";
import PostComponent from "./Post";

export default function App() {
  const postsArray = [
    {
      id: "1",
      name: "siberia can code 📘",
      imagesrc: "https://avatars.githubusercontent.com/u/45297354?v=4",
      text: "first post"
    },
    {
      id: "2",
      name: "theo",
      imagesrc: "https://avatars.githubusercontent.com/u/6751787?v=4",
      text: "second post"
    },
    {
      id: "3",
      name: "dan abramov",
      imagesrc: "https://avatars.githubusercontent.com/u/810438?v=4",
      text: "third post"
    }
  ];

  const [selectedId, setPostId] = React.useState(0);
  const [post, setSelectedPost] = React.useState(postsArray[0]);
  console.log("@", selectedId);

  useEffect(() => {
    setSelectedPost(postsArray[selectedId]);
  }, [selectedId]);

  return (
    <div className="App">
      <div>выбранный пользователь:</div>
      <div className="user">
        <img
          className={"avatar"}
          src={post.imagesrc}
          style={{ width: "30px" }}
        />
        {post.name}
      </div>
      <br />
      <br />
      <br />
      <div>список постов</div>
      {postsArray.length
        ? postsArray.map((el, index) => (
            <PostComponent data={el} onClick={() => setPostId(index)} />
          ))
        : []}
    </div>
  );
}

// Post.tsx

const Posts = ({ data, onClick }: any) => {
  const IMAGE = data.imagesrc;

  return (
    <div className="post" onClick={onClick}>
      <img className={"avatar"} src={IMAGE} style={{ width: "30px" }} />
      {data.name}
      <p>{data.text}</p>
    </div>
  );
};

export default Posts;

Ответ

Уберите дублирующее состояние post и эффект: выбранный пост вычисляется из массива и selectedId. Добавьте key, типы props и доступное управление выбором.

Вынесите статический postsArray за компонент. Вместо индекса храните ID:

const [selectedId, setSelectedId] = useState(postsArray[0]?.id ?? null);
const post = postsArray.find(item => item.id === selectedId);

Обработайте отсутствие post, изображениям задайте alt. Элемент списка: <PostComponent key={item.id} data={item} onClick={() => setSelectedId(item.id)} />. Props опишите через PostData и onClick: () => void, без any. Выбор делайте кнопкой внутри article вместо кликабельного div: это даст клавиатурное управление. Производное значение не требует второго рендера через useEffect.