\n\n try {\n actualChildProps = useSyncExternalStore(\n // TODO We're passing through a big wrapper that does a bunch of extra side effects besides subscribing\n subscribeForReact,\n // TODO This is incredibly hacky. We've already processed the store update and calculated new child props,\n // TODO and we're just passing that through so it triggers a re-render for us rather than relying on `uSES`.\n actualChildPropsSelector,\n getServerState\n ? () => childPropsSelector(getServerState(), wrapperProps)\n : actualChildPropsSelector,\n )\n } catch (err) {\n if (latestSubscriptionCallbackError.current) {\n // eslint-disable-next-line no-extra-semi\n ;(err as Error).message +=\n `\\nThe error may be correlated with this previous error:\\n${latestSubscriptionCallbackError.current.stack}\\n\\n`\n }\n\n throw err\n }\n\n useIsomorphicLayoutEffect(() => {\n latestSubscriptionCallbackError.current = undefined\n childPropsFromStoreUpdate.current = undefined\n lastChildProps.current = actualChildProps\n })\n\n // Now that all that's done, we can finally try to actually render the child component.\n // We memoize the elements for the rendered child component as an optimization.\n const renderedWrappedComponent = React.useMemo(() => {\n return (\n // @ts-ignore\n \n )\n }, [reactReduxForwardedRef, WrappedComponent, actualChildProps])\n\n // If React sees the exact same element reference as last time, it bails out of re-rendering\n // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.\n const renderedChild = React.useMemo(() => {\n if (shouldHandleStateChanges) {\n // If this component is subscribed to store updates, we need to pass its own\n // subscription instance down to our descendants. That means rendering the same\n // Context instance, and putting a different value into the context.\n return (\n \n {renderedWrappedComponent}\n \n )\n }\n\n return renderedWrappedComponent\n }, [ContextToUse, renderedWrappedComponent, overriddenContextValue])\n\n return renderedChild\n }\n\n const _Connect = React.memo(ConnectFunction)\n\n type ConnectedWrapperComponent = typeof _Connect & {\n WrappedComponent: typeof WrappedComponent\n }\n\n // Add a hacky cast to get the right output type\n const Connect = _Connect as unknown as ConnectedComponent<\n typeof WrappedComponent,\n WrappedComponentProps\n >\n Connect.WrappedComponent = WrappedComponent\n Connect.displayName = ConnectFunction.displayName = displayName\n\n if (forwardRef) {\n const _forwarded = React.forwardRef(\n function forwardConnectRef(props, ref) {\n // @ts-ignore\n return \n },\n )\n\n const forwarded = _forwarded as ConnectedWrapperComponent\n forwarded.displayName = displayName\n forwarded.WrappedComponent = WrappedComponent\n return /*#__PURE__*/ hoistStatics(forwarded, WrappedComponent)\n }\n\n return /*#__PURE__*/ hoistStatics(Connect, WrappedComponent)\n }\n\n return wrapWithConnect\n}\n\nexport default connect as Connect\n","import React, { useState } from \"react\";\r\nimport \"./ContentView.css\";\r\nimport { useSelector } from \"react-redux\";\r\nconst ContentView = () => {\r\n const surah = useSelector((state) => state.quran.currentSurah);\r\n const surahText = surah.ayahs?.map((el, idx) => {\r\n console.log(el.text);\r\n\r\n return (\r\n <>\r\n {el.text}({idx + 1})\r\n \r\n );\r\n });\r\n // console.log(surahText);\r\n\r\n const [fontSize, setFontSize] = useState();\r\n return (\r\n \r\n {\r\n setFontSize(e.target.value);\r\n }}\r\n />\r\n {/*