useClosure
React hook for capture up-to-date value in closure.
What problem dose the library solve?
Becasue how closure works in javascript. The variables in the parent scope will not change throngh a closure's liefcycle. See the example:
; { const count setCount = ; // useCallBack will return a memoized version of the callback to prevent unnecessary renders const onClickChild = ; ; return <div> <div>count: count</div> <Child onClick=onClickChild /> </div> ;}
How can we solve this? Meet useClosure;
Install
npm install use-closure --save
or
yarn add use-closure
Usage
;; { const count setCount = ; // useClosure always return the same reference, so the Child component will never re-render. const onClickChild = ; ; return <div> <div>count: count</div> <Child onClick=onClickChild /> </div> ;}