Function call in hook with React

So heres is the thing, and i'm trying to study javascript refence x copy, and shallow copy, to understand it.

Basically, if we have a function, and put it into a hook, and export it from the hook:

// myHook.ts
const useSuccess = setSuccessOverlay() // this is a hook, now useSuccess has: {openOverlay(), closeOverlay(), isOpen }

export {
useSuccess
}

// firstScreen.tsx

const { useSuccess } = myHook()

<Overlay isOpen={useSuccess.isOpen}>
//code
</Overlay>

// secondScreen.tsx

const { useSuccess } = myHook()

const makeOverlayOpen = () => {
  useSuccess.openOverlay()
}

<Button onClick={makeOverlayOpen}>...
// rest of the code

// myHook.ts
const useSuccess = setSuccessOverlay() // this is a hook, now useSuccess has: {openOverlay(), closeOverlay(), isOpen }

export {
useSuccess
}

// firstScreen.tsx

const { useSuccess } = myHook()

<Overlay isOpen={useSuccess.isOpen}>
//code
</Overlay>

// secondScreen.tsx

const { useSuccess } = myHook()

const makeOverlayOpen = () => {
  useSuccess.openOverlay()
}

<Button onClick={makeOverlayOpen}>...
// rest of the code

so, when i click on the Button, the overlay of

firstScreen

firstScreen

doesn't open, like, if a add a navigation on the onclick, and make

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
}

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
}

it will nav to the first screen, and the

useSuccess

useSuccess

tha comes from the hook, comes with

isOpen = false

isOpen = false

even that, if a add a log on the click:

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
  console.debug(useSuccess.isOpen) // returns true
}

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
  console.debug(useSuccess.isOpen) // returns true
}

it's like each

useSuccess

useSuccess

that i reference when calling fron the hook, is a diffrent function in memory, pointers to a different one

KP-C

Kevin Powell - Community•3y ago

Augustos

Function call in hook with React

So heres is the thing, and i'm trying to study javascript refence x copy, and shallow copy, to understand it.

Basically, if we have a function, and put it into a hook, and export it from the hook:

// myHook.ts
const useSuccess = setSuccessOverlay() // this is a hook, now useSuccess has: {openOverlay(), closeOverlay(), isOpen }

export {
useSuccess
}

// firstScreen.tsx

const { useSuccess } = myHook()

<Overlay isOpen={useSuccess.isOpen}>
//code
</Overlay>

// secondScreen.tsx

const { useSuccess } = myHook()

const makeOverlayOpen = () => {
  useSuccess.openOverlay()
}

<Button onClick={makeOverlayOpen}>...
// rest of the code

// myHook.ts
const useSuccess = setSuccessOverlay() // this is a hook, now useSuccess has: {openOverlay(), closeOverlay(), isOpen }

export {
useSuccess
}

// firstScreen.tsx

const { useSuccess } = myHook()

<Overlay isOpen={useSuccess.isOpen}>
//code
</Overlay>

// secondScreen.tsx

const { useSuccess } = myHook()

const makeOverlayOpen = () => {
  useSuccess.openOverlay()
}

<Button onClick={makeOverlayOpen}>...
// rest of the code

so, when i click on the Button, the overlay of

firstScreen

firstScreen

doesn't open, like, if a add a navigation on the onclick, and make

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
}

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
}

it will nav to the first screen, and the

useSuccess

useSuccess

tha comes from the hook, comes with

isOpen = false

isOpen = false

even that, if a add a log on the click:

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
  console.debug(useSuccess.isOpen) // returns true
}

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
  console.debug(useSuccess.isOpen) // returns true
}

it's like each

useSuccess

useSuccess

that i reference when calling fron the hook, is a diffrent function in memory, pointers to a different one

Function call in hook with React

Similar Threads

Function call in hook with React

Similar Threads

Similar Threads

Similar Threads