| 1 | import { memo, useLayoutEffect, useRef } from 'react';
|
|---|
| 2 | import { useAppDispatch } from './hooks';
|
|---|
| 3 | import { addCartesianGraphicalItem, addPolarGraphicalItem, removeCartesianGraphicalItem, removePolarGraphicalItem, replaceCartesianGraphicalItem } from './graphicalItemsSlice';
|
|---|
| 4 | var SetCartesianGraphicalItemImpl = props => {
|
|---|
| 5 | var dispatch = useAppDispatch();
|
|---|
| 6 | var prevPropsRef = useRef(null);
|
|---|
| 7 | useLayoutEffect(() => {
|
|---|
| 8 | if (prevPropsRef.current === null) {
|
|---|
| 9 | dispatch(addCartesianGraphicalItem(props));
|
|---|
| 10 | } else if (prevPropsRef.current !== props) {
|
|---|
| 11 | dispatch(replaceCartesianGraphicalItem({
|
|---|
| 12 | prev: prevPropsRef.current,
|
|---|
| 13 | next: props
|
|---|
| 14 | }));
|
|---|
| 15 | }
|
|---|
| 16 | prevPropsRef.current = props;
|
|---|
| 17 | }, [dispatch, props]);
|
|---|
| 18 | useLayoutEffect(() => {
|
|---|
| 19 | return () => {
|
|---|
| 20 | if (prevPropsRef.current) {
|
|---|
| 21 | dispatch(removeCartesianGraphicalItem(prevPropsRef.current));
|
|---|
| 22 | /*
|
|---|
| 23 | * Here we have to reset the ref to null because in StrictMode, the effect will run twice,
|
|---|
| 24 | * but it will keep the same ref value from the first render.
|
|---|
| 25 | *
|
|---|
| 26 | * In browser, React will clear the ref after the first effect cleanup,
|
|---|
| 27 | * so that wouldn't be an issue.
|
|---|
| 28 | *
|
|---|
| 29 | * In StrictMode, however, the ref is kept,
|
|---|
| 30 | * and in the hook above the code checks for `prevPropsRef.current === null`
|
|---|
| 31 | * which would be false so it would not dispatch the `addCartesianGraphicalItem` action again.
|
|---|
| 32 | *
|
|---|
| 33 | * https://github.com/recharts/recharts/issues/6022
|
|---|
| 34 | */
|
|---|
| 35 | prevPropsRef.current = null;
|
|---|
| 36 | }
|
|---|
| 37 | };
|
|---|
| 38 | }, [dispatch]);
|
|---|
| 39 | return null;
|
|---|
| 40 | };
|
|---|
| 41 | export var SetCartesianGraphicalItem = /*#__PURE__*/memo(SetCartesianGraphicalItemImpl);
|
|---|
| 42 | export function SetPolarGraphicalItem(props) {
|
|---|
| 43 | var dispatch = useAppDispatch();
|
|---|
| 44 | useLayoutEffect(() => {
|
|---|
| 45 | dispatch(addPolarGraphicalItem(props));
|
|---|
| 46 | return () => {
|
|---|
| 47 | dispatch(removePolarGraphicalItem(props));
|
|---|
| 48 | };
|
|---|
| 49 | }, [dispatch, props]);
|
|---|
| 50 | return null;
|
|---|
| 51 | } |
|---|