{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-freeze"],"cli":null},"imports":["import { Freeze } from 'react-freeze'","const { Freeze } = require('react-freeze')","import { enableFreeze } from 'react-native-screens'","import type { FreezeProps } from 'react-freeze'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}