I’m Diep Phi, a Software Engineer based in Vietnam, an aspiring blogger, and a travel enthusiast.

Will AI Replace You, or Will People Who Know How to Use AI Replace You? Hi there, while you’re pondering that question (if you are), I want to share my exciting journey of using AI to build my personal portfolio. Instead of coding from scratch for weeks, I leveraged the power of AI to complete this website in just a few days. Why I Decided to Use AI The truth is, I had been procrastinating on creating my personal portfolio for too long. The reason? Perfectionism paralysis - a common affliction among developers who want everything to be perfect from the start. But then I realized, instead of endless hesitation, why not fire up my computer and craft a few simple (yet somewhat elaborate) prompts? ...

Performance is a crucial factor in React application development. In this article, we’ll explore techniques and best practices to optimize performance. 1. React.memo() React.memo() helps prevent unnecessary re-renders: import React, { memo } from "react"; const ExpensiveComponent = memo(({ data }) => { console.log("Component rendered"); return ( <div> <h2>{data.title}</h2> <p>{data.description}</p> </div> ); }); // Component only re-renders when props change export default ExpensiveComponent; 2. useMemo Hook Use useMemo for expensive calculations: import React, { useMemo } from "react"; function ProductList({ products, searchTerm }) { const filteredProducts = useMemo(() => { return products.filter((product) => product.name.toLowerCase().includes(searchTerm.toLowerCase()), ); }, [products, searchTerm]); const expensiveCalculation = useMemo(() => { return filteredProducts.reduce((sum, product) => sum + product.price, 0); }, [filteredProducts]); return ( <div> <p>Total Price: {expensiveCalculation}</p> {filteredProducts.map((product) => ( <div key={product.id}> {product.name} - ${product.price} </div> ))} </div> ); } 3. useCallback Hook Optimize event handlers: ...

React Hooks have revolutionized how we write React components. In this article, we’ll explore basic hooks and how to apply them in real-world projects. Basic Hooks 1. useState Hook useState is the most basic hook, helping manage state in functional components: import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } 2. useEffect Hook useEffect replaces lifecycle methods in class components: ...