React đã trở thành một trong những thư viện JavaScript phổ biến nhất cho phát triển giao diện người dùng. Tuy nhiên, để thực sự làm chủ React và tối ưu hiệu suất dự án, các Senior React Engineer thường có những bí quyết riêng mà không phải ai cũng biết. Hãy cùng khám phá một số mẹo hữu ích dưới đây!

1. Tối ưu hóa việc sử dụng React.memo và useCallback

Khi làm việc với các component con, việc render lại không cần thiết có thể ảnh hưởng đến hiệu suất ứng dụng. Một Senior React Engineer luôn biết cách sử dụng React.memo và useCallback để ngăn chặn những lần render dư thừa.

• React.memo giúp ghi nhớ kết quả render của một component dựa trên props, chỉ re-render khi props thay đổi.
• useCallback giúp tối ưu hóa các hàm callback, tránh việc tạo lại hàm không cần thiết trong mỗi lần render.

const ChildComponent = React.memo(({ onClick }) => {
    console.log("Child render");
    return <button onClick={onClick}>Click me</button>;
});

const ParentComponent = () => {
    const handleClick = useCallback(() => {
        console.log("Clicked");
    }, []);
    
    return <ChildComponent onClick={handleClick} />;
};

2. Sử dụng Context API hợp lý để tránh re-render toàn bộ ứng dụng

Một lỗi phổ biến là sử dụng Context API mà không tối ưu hóa, dẫn đến việc tất cả các component con re-render mỗi khi Context thay đổi. Một Senior React Engineer thường sử dụng context segmentation hoặc useMemo để giảm thiểu vấn đề này.

const UserContext = React.createContext();

const UserProvider = ({ children }) => {
    const [user, setUser] = useState({ name: "John Doe", age: 30 });
    
    const value = useMemo(() => ({ user, setUser }), [user]);
    
    return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

3. Quản lý state hiệu quả với Zustand hoặc Recoil thay vì Redux

Redux là một thư viện phổ biến để quản lý state, nhưng đối với các ứng dụng không quá phức tạp, các Senior React Engineer có thể lựa chọn Zustand hoặc Recoil để đơn giản hóa việc quản lý state.

• Zustand có API đơn giản, không cần reducer phức tạp như Redux.
• Recoil cho phép quản lý state theo hướng lập trình functional và có khả năng phân tách logic tốt hơn.

Ví dụ sử dụng Zustand:

import create from 'zustand';

const useStore = create((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
    const { count, increment } = useStore();
    return <button onClick={increment}>Count: {count}</button>;
};

4. Sử dụng React Suspense và Lazy Loading để cải thiện hiệu suất cho Senior React Engineer

Đối với các ứng dụng lớn, tải trước toàn bộ component có thể làm chậm trang web. Senior React Engineer sẽ tận dụng React.lazy và Suspense để chỉ tải component khi cần thiết.

const LazyComponent = React.lazy(() => import("./LazyComponent"));

const App = () => {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
        </Suspense>
    );
};

5. Mẹo chỉ Senior React Engineer biết – Code splitting và sử dụng dynamic imports để tối ưu bundle size

Một kỹ thuật quan trọng mà các Senior React Engineer thường áp dụng là code splitting bằng cách sử dụng Webpack hoặc dynamic import để giảm kích thước file bundle.

const loadComponent = async () => {
    const module = await import("./HeavyComponent");
    return module.default;
};

Kết Luận

Những mẹo trên đây không chỉ giúp tối ưu hiệu suất mà còn cải thiện trải nghiệm người dùng và nâng cao kỹ năng phát triển React. Nếu bạn đang trên con đường trở thành một React Engineer, hãy áp dụng những kỹ thuật này vào dự án của mình ngay hôm nay!