React Native Customized Hooks – Portion 1

by:

Softwares

– useEffectOnce

import  useEffect  from 'react'

export purpose useEffectOnce(cb) 
  useEffect(cb, [])

Enter fullscreen manner

Exit fullscreen mode

Example

import  useEffectOnce  from './hooks'

useEffectOnce(() => 
  console.log('Will be executed at to start with render only')
)
Enter fullscreen mode

Exit fullscreen manner


– useUpdateEffect

import  useEffect, useRef  from 'react'

export purpose useUpdateEffect(callback, dependencies) 
  const firstRenderRef = useRef(accurate)

  useEffect(() => 
    if (firstRenderRef.recent) 
      firstRenderRef.current = false
      return
    
    return callback()
  , dependencies)

Enter fullscreen method

Exit fullscreen manner

Example

import  useState  from 'react'
import  useUpdateEffect  from './hooks'

const [counter, setCounter] = useState(5)

useUpdateEffect(() => 
  console.log('Will be executed when the dependency updates, But will never be executed at initial render')
, [counter])
Enter fullscreen manner

Exit fullscreen method


– useToggle

export purpose useToggle(defaultValue = fake) 
  const [value, setValue] = useState(defaultValue)

  const toggleValue = useCallback(() => setValue((value) => !worth), [])

  return [value, toggleValue]

Enter fullscreen mode

Exit fullscreen mode

Case in point

import  useToggle  from './hooks'

const [isActive, setIsActive] = useToggle(fake)
Enter fullscreen method

Exit fullscreen method


– useTimeout

import  useCallback, useEffect, useRef  from 'react'

export operate useTimeout(callback, hold off) 
  const callbackRef = useRef(callback)
  const timeoutRef = useRef(null)

  useEffect(() => 
    callbackRef.existing = callback
  , [callback])

  const established = useCallback(() => 
    timeoutRef.recent = setTimeout(() => callbackRef.existing(), hold off)
  , [delay])

  const crystal clear = useCallback(() => 
    timeoutRef.present-day && clearTimeout(timeoutRef.existing)
  , [])

  useEffect(() => 
    established()
    return crystal clear
  , [delay, set, clear])

  const reset = useCallback(() => 
    apparent()
    established()
  , [clear, set])

  return  reset, obvious 

Enter fullscreen mode

Exit fullscreen method

Instance

import  useState  from 'react'
import  useTimeout  from './hooks'

const [counter, setCounter] = useState(5)
const  very clear, reset  = useTimeout(() => setCounter(), 1000)

// counter worth is 5, and right after 1000ms the value will be changed to  as we can see, and we also have 2 features, clear that clears Timeout, and a Reset functionality.
Enter fullscreen mode

Exit fullscreen method


– useDebounce

import  useEffect  from 'react'
import  useTimeout  from './useTimeout'

export purpose useDebounce(callback, hold off, dependencies) 
  const  reset, obvious  = useTimeout(callback, delay)
  useEffect(reset, [...dependencies, reset])
  useEffect(clear, [])

Enter fullscreen mode

Exit fullscreen method

Instance

import  useState  from 'react'
import  useDebounce  from './hooks'

const [term, setTerm] = useState('')
useDebounce(async () => await searchAutoComplete(phrase), 1000, [term])

// Typing in a search area, and we want to deliver a lookup car finish ask for that returns array of vehicle entire terms, but we want to mail this ask for only immediately after consumer stops typing for 1000ms
Enter fullscreen manner

Exit fullscreen method


Leave a Reply

Your email address will not be published. Required fields are marked *