Today I Learned

Container/Presentational component pattern

// Custom Hook
const useProducts = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("/api/products")
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, []);

  return products;
};

// Container Component
function ProductContainer() {
  const products = useProducts();

  return <ProductList products={products} />;
}

// Presentational Component
function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

React enviorment variables need REACT_APP_YOUR-VARIABLE-NAME to works in production/stagin servers

React

https://create-react-app.dev/docs/adding-custom-environment-variables/

React.Memo(...)

React

memo lets you skip re-rendering a component when its props are unchanged.

Wrap a component in memo to get a memoized version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed. But React may still re-render it: memoization is a performance optimization, not a guarantee.

import { memo } from 'react';
const SomeComponent = memo(function SomeComponent(props) {  // ...});

<React.StrictMode>

React

StricMode is a tool to help React developers detect possible issues in the code.

Some advantages are:

Identify early problems

2. Detection of unwanted side effects
3. Improved code quality