🔄 Why is useEffect running multiple times?
Using non-primitive values (e.g., objects, arrays, functions) in the dependency array? ⚠️ Each render creates a new reference, so React thinks the value has changed, triggering useEffect again.
#react#reactjs#reactjstips
Don't mix UI and Logic in the same file
When you include too much business logic inside your React components, it makes the code harder to read, maintain, and reuse. Overloaded components can become bloated and difficult to test.
#friyad#reactjs#cleancode#reactjstips
🧩 React's "Single parent element rule" is like putting puzzle pieces in one box!
1️⃣ When React is showing stuff on the screen (rendering), it needs all your items in one big container (like a div 📦).
2️⃣ So, when you've got lots of things to display, wrap them in a main container (could be a div)!
3️⃣ This keeps React happy and helps it do its magic smoothly while showing your awesome components🪄
#ReactJS#ReactJSTips#RenderingTips#developers#Twitter
Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.
#ReactjsTips
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
#ReactjsTips
Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
For example, class becomes className in JSX, and tabindex becomes tabIndex.
#ReactjsTips