{"id":18710,"library":"react-freeze","title":"react-freeze","description":"Prevent React component subtrees from rendering using Suspense. Current stable version is 1.0.4. React Freeze allows freezing parts of the component tree without unmounting, preserving React state and native views (e.g., scroll position, input state, loaded images). It leverages React 17+'s Suspense mechanism and is primarily used with React Navigation in React Native to avoid unnecessary re-renders of hidden screens. Unlike simple conditional rendering, it retains DOM/native instances. Requires React >=17 and React Native >=0.64. Maintained by Software Mansion, the team behind react-native-screens and react-native-reanimated.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/software-mansion/react-freeze","tags":["javascript","react","freeze","typescript"],"install":[{"cmd":"npm install react-freeze","lang":"bash","label":"npm"},{"cmd":"yarn add react-freeze","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-freeze","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; requires React 17 or higher to use Suspense","package":"react","optional":false}],"imports":[{"note":"ESM default export is not available; only named export.","wrong":"import Freeze from 'react-freeze'","symbol":"Freeze","correct":"import { Freeze } from 'react-freeze'"},{"note":"CommonJS require returns an object with Freeze property.","wrong":"const Freeze = require('react-freeze')","symbol":"Freeze","correct":"const { Freeze } = require('react-freeze')"},{"note":"enableFreeze is exported from react-native-screens >=3.9.0, not from react-freeze.","wrong":"import { enableFreeze } from 'react-freeze'","symbol":"enableFreeze","correct":"import { enableFreeze } from 'react-native-screens'"},{"note":"TypeScript types are bundled; FreezeProps includes freeze: boolean and children: ReactNode.","wrong":"","symbol":"type FreezeProps","correct":"import type { FreezeProps } from 'react-freeze'"}],"quickstart":{"code":"import React from 'react';\nimport { Freeze } from 'react-freeze';\n\nfunction HiddenScreen({ isHidden }) {\n  return (\n    <Freeze freeze={isHidden}>\n      <ExpensiveComponent />\n    </Freeze>\n  );\n}\n\nfunction ExpensiveComponent() {\n  // This component won't re-render while frozen\n  return <div>Some content</div>;\n}","lang":"typescript","description":"Shows how to wrap a component tree with Freeze and conditionally freeze it based on a prop, preventing re-renders when hidden."},"warnings":[{"fix":"Ensure side effects that require cleanup are not dependent on freeze/unfreeze cycles; consider using alternative patterns.","message":"Freeze component suspends rendering of children but does NOT unmount them; state is preserved, but any cleanup in useEffect (return function) will not run while frozen.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use <Freeze freeze={...}> directly in your components or navigate using react-native-screens' newer API.","message":"enableFreeze from react-native-screens may be deprecated in future versions; use Suspense-based freezing directly with react-freeze.","severity":"deprecated","affected_versions":">=3.9.0"},{"fix":"Upgrade React to version 17 or higher.","message":"Freeze only works with React 17+; using it with older React versions will cause a runtime error due to missing Suspense support.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test gesture interactions thoroughly; future versions may improve this.","message":"Enabling freeze in react-navigation via react-native-screens may affect gesture handling (e.g., slide-back) on the second-to-top screen; only the top screen is not frozen.","severity":"gotcha","affected_versions":">=3.9.0"},{"fix":"Upgrade React Native to 0.64+.","message":"React Native 0.64 or higher is required; earlier versions do not support the necessary Suspense architecture.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade React to version 17 or higher using: npm install react@17 react-dom@17","cause":"React Freeze requires React 17's Suspense mechanism.","error":"Error: Cannot freeze a component tree because React version is < 17. Please upgrade to React 17 or later."},{"fix":"Upgrade React Native to 0.64+ and React to 17+.","cause":"Environment does not support Suspense (e.g., older RN version).","error":"Invariant Violation: Suspense is not supported in this environment. Ensure you are using React 17+ and React Native 0.64+."},{"fix":"Change to: import { Freeze } from 'react-freeze'","cause":"Incorrect import syntax (default import instead of named import).","error":"TypeError: react_freeze__WEBPACK_IMPORTED_MODULE_9__.Freeze is not a function"},{"fix":"Import enableFreeze from 'react-native-screens' (v3.9.0+).","cause":"enableFreeze is not exported from react-freeze; it's from react-native-screens.","error":"export 'enableFreeze' was not found in 'react-freeze'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}