score:0
usestate
"setter" functions maintain the same reference over render cycles, so those should be safe to use. it is even mentioned that they can be omitted on dependency arrays:
(the identity of the setcount function is guaranteed to be stable so it’s safe to omit.)
you could pass the setter function directly:
<refcontext.provider value={setchild3}>
...and then read it:
const contextusingchild = props => {
const setchild3 = usecontext(refcontext);
return <div ref={setchild3}>this child uses context</div>;
};
score:1
you will have extra re-render each time target element appears(since it might be conditionally rendered it may happen more than once-in-lifetime).
otherwise it should work just fine. except, it might be confusing to future code readers.
i'd rather use extra function + useref
to make less cognitive load(aka "confusion"). and even more: we might not need callback ref since we have useeffect
:
const childref = useref();
useeffect(() => {
... do something
}, [childref.current]);
<div ref={childref} ...
but sure, in very general case this might not suit us, since callback ref
is called just twice per target element's life, while useeffect
might be triggered more often if there are more dependencies in the list. but still.
Source: stackoverflow.com
Related Query
- Is it safe to use a useState "setter" function as a callback ref?
- Pass useState setter function as a callback
- How to use useState hook with array state for children that call the setter function without infinite rendering loop?
- How can I use a ref callback function on a component this is connect to the redux store?
- How to use callback with useState hook in react
- Is it safe to use ref.current as useEffect's dependency when ref points to a DOM element?
- React - Is useState 's setter function able to change?
- React hook form v7 Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
- useState and callback function
- How to use a function within useState
- Why is a React Ref callback (as an arrow function or inline function) called multiple times on initial page load?
- How to use map function for hooks useState properties
- How to use state callback function equivalent on Hooks
- How to use map function for hooks useState properties dynamically
- React: formik form, how to use state after submit inside a callback function
- useState not re-rendering component if it is called inside callback function
- React: using state in a passed callback function to a class constructor doesnt use latest version of state
- How to use function in callback of image onload event in react js?
- How can I use the useState function as a toggle method?
- how to use two useState in one function so that the second useState can use the first updated useState?
- Using Typescript generics in a callback invoking a React useState setter
- how to call UseState hook's state updater function inside a callback in react.js
- React useState hook (and useEffect) not working in callback function
- useState not updating data when passing from parent function component using ref
- React throws an error "Can't assign to property" scrollLeft "on 1: not an object" When trying use ref in custom function
- Use custom hook in callback function
- Using prevState Callback function in UseState react Hook
- Use "this" pointer from inside map callback function using ReactJs
- Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef(). With React Hook Form
- how to use useState inside inner function scope in react.js hooks
More Query from same tag
- onChange antd Input component doesn't setState (hook) properly with list from axios get in React
- Maximum depth update exceeded error when navigating to routes react-router v6
- Typescript and styled-components gives error on import
- React trying to loop through state object
- How do I set the target location for a React Lazy chunk using Laravel Mix?
- How can I speed up a React render() method that generates a huge DOM?
- Unable to figure out the bug in merge sort
- Jest: react-router tests returns undefined 'params'
- keep new line in <ExpansionPanelDetails> of material UI
- how to import reducer to store.js from createSlice @reduxjs/toolkit
- Scroll bar doesn't scroll all the way to the bottom of my table
- Jest Test Babel Error: Plugin/Preset files are not allowed to export objects
- React mapping an array
- npm - EPERM mkdir: operation not permitted on Windows
- is there any solution to error in nodejs " Cast to Number failed for value "undefined" at path "
- how to get items from array on respectively
- different way of calling a component
- Updating prop on a specific component based on API response
- Video autoplay does not work on mobile (React)
- ReactJS Application - resiliency VS failing fast
- React - "Forward" event
- Wordpress Gutenberg Autocompleters, no auto completion completes
- How do I integrate Plotly realtime updating graphs with React JS without rerender of component
- Jest error on upgrading to latest version - a worker process has failed to exit gracefully
- The right React Component PropTypes for es6 (Weak) Maps, Sets
- I cannot get the updated value from the global state (REDUX) when I use Material-UI
- ReactJS call API and Redirect
- React avoid re-calling functions after re-render
- DeckGL: Prevent map movement when dragging elements
- Need help in React Saga Unit test