useEffect

useEffect(
  () => {
    // set up stuff
    return function cleanup() {
      // clean up stuff
    }
  },
  // depend on stuff:
  [],
)

Su dependsais

useEffect(() => {}, []) naudojama kai reikia bendrautu su kažkuo, kas yra už react'o. Document TITLE, windows object, spacebar

1 - param callback fnc 2 - how often want tu run callback fnc

[] - only one time, when first rendering

useEffect(() => {}) - every rendering

Example

useEffect(() => {
  document.title = `You clicked ${number} times`;

  return () => {
    document.title = `Done`;
  }
}, [number])

useEffect(() => {}, [number]) - first render and when numberic was changed

return () => {} - paleis kada unmountins komponentą. Clean UP function

 useEffect (() => {
    const { current: tilt Node } = tiltRef
    if (!tiltNode) return
    VanillaTilt.init(tiltNode, vanillaTiltOptions)
    return () => tiltNode.vanillaTilt?.destroy()
},
[vanillaTiltOptions, tiltRef]))

React Hook useEffect has an unnecessary dependency: tiltRef.current'. Either exclude it or remove the dependency array. Mutable values like 'tiltRef.current' aren't valid dependencies because mutating them doesn't re-render the component. eslint (react-hooks/exhaustive-deps)

Esmė - mutacija be renderinimo

Kai labai daug dependence

useEffect(() => {
  const { current: tiltNode } = tiltRef
  if (!tiltNode) return
  const vanillaTiltOptions = {
    max,
    speed,
    glare,
    'max-glare': maxGlare,
  }
  VanillaTilt.init(tiltNode, vanillaTiltOptions)
  return () => tiltNode.vanillaTilt?.destroy()
  }, [glare, max, maxGlare, speed])

jeigu lb dauramsu reiia onbejta neufoti arba json stringify

Primitive Dependencies

const options1 = { glare: true, max: 25, 'max-glare': 0.5, speed: 400 } 
const options2 = { glare: true, max: 25, 'max-glare': 0.5, speed: 400 } 
Object.is(options1, options2) // false!!

const options1 = { glare: true, max: 25, 'max-glare': 0.5, speed: 400 } 
const options2 = options1 
Object.is(options1, options2) // true