The useRef hook is not just for DOM refs, but can store any mutable value you like. Example function FunctionalBar(props) { const [foo] = useState(new Animated.Value(0)); const _foo = useRef(0); function showFoo() { let anim = Animated.timing(foo, { toValue: 1, duration: 1000, useNativeDriver: true }); anim.start(() => console.log(_foo.current)); } useEffect(() => { function _onChangeFoo({ value … Read more
The useRef creates an “instance variable” in functional component. It acts as a flag to indicate whether it is in mount or update phase without updating state. const mounted = useRef(); useEffect(() => { if (!mounted.current) { // do componentDidMount logic mounted.current = true; } else { // do componentDidUpdate logic } });
It is possible to set a function in state using hooks, but because state can be initialized and updated with a function that returns the initial state or the updated state, you need to supply a function that in turn returns the function you want to put in state. const { useState } = React; … Read more
This is a common problem for functional components that use the useState hook. The same concerns are applicable to any callback functions where useState state is used, e.g. setTimeout or setInterval timer functions. Event handlers are treated differently in CardsProvider and Card components. handleCardClick and handleButtonClick used in the CardsProvider functional component are defined in … Read more
The reason is if you useState it rerenders the view. Variables by themselves only change bits in memory and the state of your app can get out of sync with the view. Compare this examples: function Foo() { const [a, setA] = useState(0); return <div onClick={() => setA(a + 1)}>{a}</div>; } function Foo() { let … Read more
High order components are how we have been doing this type of thing until hooks came along. You can write a simple high order component wrapper for your hook. function withMyHook(Component) { return function WrappedComponent(props) { const myHookValue = useMyHook(); return <Component {…props} myHookValue={myHookValue} />; } } While this isn’t truly using a hook directly … Read more
@tam answer is halfway through what is needed to make it work with version 6.8.3. You need to provide the default value but also to useEffect to reset. That particular distinction is required if you have a form that you reload with another entity. I have a complete example in CodeSanbox here. In a nutshell: … Read more
The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together. The docs mention few really good reason to make use of Hooks instead of classes It’s hard to reuse stateful logic between components Generally when you … Read more
In general, using hooks shouldn’t change testing strategy much. The bigger issue here actually isn’t the hook, but the use of context, which complicates things a bit. There’s a number of ways to make this work, but only approach I’ve found that works with ‘react-test-renderer/shallow’ is to inject a mock hook: import ShallowRenderer from ‘react-test-renderer/shallow’; … Read more
Ref.current is null because the ref is not set till after the function returns and the content is rendered. The useEffect hook fires every time the value of contents of the array passed to it changes. By passing observed in the array and by passing a callback that logs observed to the console, the useEffect … Read more