كيف اجعل react كود انظف وادق واسهل للقراءة

يمكنك أن تنشأ خطاف لاحتواء المنطق الذي يتعامل مع البيانات بهذه الطريقة

import { useState, useEffect } from 'react';
import axios from 'axios';

const useData = () => {
  const [data, setData] = useState();
  useEffect(() => {
    function getData() {
      axios.get('http://localhost:5000/posts').then((res) => {
        setData(res.data);
      });
    }
    getData();
  }, []);

  return data;
};

export default useData;

ويمكنك استيراده في المكون وهكذا سيكون الكود نظيف ودقيق وهذا مثال بسيط فقط بل يمكنك أن تذهب خطوة الى الامام وتجعل useData دينامكيا عن طريق الشروط والمعايير وتستخدمها في كل المكونات التي تحتوي على منطق يتعامل مع البيانات

import React from 'react';

import useData from './useData';

export default function App() {
  const data = useData();

  return (
    <div>
      {data &&
        data.map((post) => (
          <div key={post.id}>
            <h1>{post.title}</h1>
            <p>{post.description}</p>
          </div>
        ))}
    </div>
  );
}