week6.3 useState, usEffect, useMemo, useCallback, memo, useRef

-

 reconciliation 

reconciliation is useState

1. import useState form react lib

2. write cosnt var which take two input (sate,  setState) satte mean if count 7 then state will be 7 then i press button and added 7+1 = 8 ; setSate tell state that you need to update yourself from 7 to 8; based on user entery.

3. the initial's it by 0 that help to store exact number to store eg: if i initial's it by 1 and the user update  state by 2 then state value need 2 but you got 3 thats wrong thats why .........!


syntax: 

import { useState } from 'react'

//write this componenet inside the app OR another function

const [count, setCount] = useState(0)


then use this componenet and write you logic


/============================================

useEffect:

The useEffect Hook allows you to perform side effects in your components and stop unnecessary rendering, rerander when dependency change only.


Some examples of side effects are: fetching data, directly updating the DOM, and timers.


useEffect accepts two arguments. The second argument is optional.

syntax**

useEffect(() => { 

//rest code

}, [dependencies]);


//==========================================

memo: 

useMemo is use to stop rerander and cashe previous memory and check if the input same 

1. A calculation function that takes no arguments, like () =>, and returns what you wanted to calculate.

2. A list of dependencies including every value within your component that’s used inside your calculation.


On the initial render, the value you’ll get from useMemo will be the result of calling your calculation.


On every subsequent render, React will compare the dependencies with the dependencies you passed during the last render. If none of the dependencies have changed (compared with Object.is), useMemo will return the value you already calculated before. Otherwise, React will re-run your calculation and return the new value.


In other words, useMemo caches a calculation result between re-renders until its dependencies change.


synntax**

import { useMemo } from 'react';


function TodoList({ todos, tab, theme }) {

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

  // ...

}


//========================================================================

useCallback, memo

//memo :- memo is help to stop re-render child component when parent component only child dependency change it will allow to render again

if you ever want memoize a function, we use useCallback


syntsx**

const  varName = useCallback(function() {

//rest code

}, [dependency])


const varName = memo(function({callBackfunctionName}) {

//rest code here

})


//======================================================


// useRef

div ref is use to override the function

useRef is a React Hook that lets you reference a value that’s not needed for rendering.


syntax** 

const ref = useRef(initialValue)





Comments

Post a Comment

Popular posts from this blog

CyberSecurity

-
 # 🔒 CYBERSECURITY A TO Z - COMPLETE GUIDE (0 to 100) # Everything You Need to Know About Cybersecurity - From Noob to Pro ================================================================================ TABLE OF CONTENTS ================================================================================ 1. CYBERSECURITY FUNDAMENTALS 2. COMMON THREATS & ATTACKS 3. AUTHENTICATION & AUTHORIZATION 4. ENCRYPTION & CRYPTOGRAPHY 5. NETWORK SECURITY 6. WEB APPLICATION SECURITY 7. DATABASE SECURITY 8. API SECURITY 9. CLOUD SECURITY 10. INCIDENT RESPONSE 11. COMPLIANCE & STANDARDS 12. SECURITY TESTING 13. SECURE CODING PRACTICES 14. DEPLOYMENT SECURITY 15. MONITORING & DETECTION 16. REAL-WORLD IMPLEMENTATIONS ================================================================================ 1. CYBERSECURITY FUNDAMENTALS ================================================================================ WHAT IS CYBERSECURITY? Protection of computer systems, networks, and data fr...
Read more

VERTICAL SCALING 💋

-
 # 🚀 VERTICAL SCALING - COMPLETE GUIDE (0 to 100) # Everything You Need to Know About Vertical Scaling in JavaScript/TypeScript ================================================================================ TABLE OF CONTENTS ================================================================================ 1. WHAT IS VERTICAL SCALING? 2. VERTICAL VS HORIZONTAL SCALING 3. NODEJS CLUSTERING 4. LOAD BALANCING 5. MEMORY OPTIMIZATION 6. CPU OPTIMIZATION 7. DATABASE OPTIMIZATION 8. CACHING STRATEGIES 9. CONNECTION POOLING 10. RATE LIMITING 11. COMPRESSION & GZIP 12. WORKER THREADS 13. MONITORING & PROFILING 14. PRODUCTION DEPLOYMENT 15. COMPLETE EXAMPLES 16. TROUBLESHOOTING ================================================================================ 1. WHAT IS VERTICAL SCALING? ================================================================================ VERTICAL SCALING (Scale Up): Increasing the power of a single server. More CPU cores, more RAM, faster storage, better ...
Read more

prisma using in project idx 13.3

-
Okay, let's troubleshoot why you might be unable to use the Prisma schema in your Project IDX workspace. Here's a breakdown of common reasons and how to fix them: 1. Prisma is not installed Problem:  Prisma might not be installed in your IDX environment. Solution:  You'll need to add it to your  .idx/dev.nix  file, like this: nix { pkgs, ... }: { # ... other configurations packages = [ # ... other packages pkgs.nodePackages.prisma ]; # ... rest of your configuration } lua (auto) Once you add this line and  rebuild the environment  by clicking the popup message, IDX will install  prisma  and make it available in your workspace. 2. The Prisma CLI is not accessible Problem:  After installation, you might need to explicitly call the Prisma CLI using its full path or use  npx . Solution:  When running Prisma commands in your terminal (in IDX), use  npx prisma  (e.g.,  npx prisma migrate dev ) or ...
Read more