4 ms·
React only re-renders a component if the state changes, the props change, or a parent component re-renders. In my app, I only have one component where I needed
by notshift 5y ago
React only re-renders a component if the state changes, the props change, or a parent component re-renders. In my app, I only have one component where I needed to break out of the vdom, and none of the parent tree ever re-rendered (except when navigating to a new page, which correctly tears down the component), so it was as simple as just one useRef to grab a reference and one useEffect to pass it to my other code after the component rendered.
- crooked-v 5y agoA pretty straightforward pattern here (and one that I actually just implemented with no hiccups for a non-React animation library) looks like: import { useEffect, useRef } from 'react'; import { Controller } from 'some-animation-library'; const SomeWrapperComponent = ({ options }) => { const elementRef = useRef(null) const controllerRef = useRef(null) useEffect(() => { if (!elementRef.current) { return () => {} } if (!controllerRef.current) { controllerRef.current = new Controller(elementRef.current, options) } else { controllerRef.current.setOptions(options) } return () => { controllerRef.current.doSomeCleanup() } }, [options]) return <div ref={elementRef}></div> }
- crate_barre 5y agoThanks, that’s exactly the simplicity I wanted you to share, you did good.