How to store initial prop state in function component?

user_8945271 0
Viewed 44

I need to pass some props to a third-party drawing library, but I need to pass only the initial value of the prop. I've made a wrapper component which captures the initial props in state, and then passes them to the third-party component.

This works, but since setZoom and setCenter aren't used, it feels like an anti-pattern:

function Wrapper({ center, zoom }) {
  const [initialZoom, setInitialZoom] = useState(zoom);
  const [initialCenter, setInitialCenter] = useState(center);

  return <ThirdParty zoom={initialZoom} center={initialCenter} />
}

I tried useMemo but eslint also warned about missing dependencies:

React Hook useMemo has a missing dependency: 'zoom'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

function Wrapper({ center, zoom }) {
  const initialZoom = useMemo(() => zoom, []); // eslint-disable-line react-hooks/exhaustive-deps
  const initialCenter = useMemo(() => center, []); // eslint-disable-line react-hooks/exhaustive-deps

  return <ThirdParty zoom={initialZoom} center={initialCenter} />
}

Is there an idiomatic way to do this? Or is it so non-standard that just ignoring the eslint warnings on the useMemo example is the best option?

react-hooks reactjs
1 Answers

This works, but since setZoom and setCenter aren't used, it feels like an anti-pattern:

function Wrapper({ center, zoom }) {
  const [initialZoom, setInitialZoom] = useState(zoom);
  const [initialCenter, setInitialCenter] = useState(center);

  return <ThirdParty zoom={initialZoom} center={initialCenter} />
}

This isn't so much anti-pattern as much as it is just unused declarations. You don't need to destructure the state updater function. Just set the initial value and don't ever update it.

function Wrapper({ center, zoom }) {
  const [initial] = useState({ center, zoom });

  return <ThirdParty zoom={initial.zoom} center={initial.center} />
}

I tried useMemo but eslint also warned about missing dependencies:

React Hook useMemo has a missing dependency: 'zoom'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

function Wrapper({ center, zoom }) {
  const initialZoom = useMemo(() => zoom, []); // eslint-disable-line react-hooks/exhaustive-deps
  const initialCenter = useMemo(() => center, []); // eslint-disable-line react-hooks/exhaustive-deps

  return <ThirdParty zoom={initialZoom} center={initialCenter} />
}

This is also a valid use case, using an empty dependency array to run the hook once on component mount, but as you see, the react hook linting rules will complain about a possible missing dependency.

Other alternatives include:

  • Using a React ref to hold the initial values:

    function Wrapper({ center, zoom }) {
  const initialRef = useRef({ center, zoom });

  return <ThirdParty zoom={initialRef.zoom} center={initialRef.center} />
}

Instead of a wrapper component you may want a Higher Order Component to just memoize the initial props value.

Example:

const withMemoizedInitialProps = Component => props => {
  const initialPropsRef = useRef(props);
  return <Component {...initialPropsRef.current} />
};

...

const DecoratedThirdParty = withMemoizedInitialProps(ThirdParty);

...

<DecoratedThirdParty zoom={zoom} center={center} />

Edit how-to-store-initial-prop-state-in-function-component

user_86908570
Related