diff --git a/docs/animated.md b/docs/animated.md index b74541b2281..dacbb306d79 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/docs/fast-refresh.md b/docs/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/docs/fast-refresh.md +++ b/docs/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/docs/imagebackground.md b/docs/imagebackground.md index 6b601f4136e..eba3b41b683 100644 --- a/docs/imagebackground.md +++ b/docs/imagebackground.md @@ -73,9 +73,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/docs/intro-react-native-components.md b/docs/intro-react-native-components.md index 8d031e48b02..eb585964154 100644 --- a/docs/intro-react-native-components.md +++ b/docs/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/docs/javascript-environment.md b/docs/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/docs/javascript-environment.md +++ b/docs/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/docs/legacy/direct-manipulation.md b/docs/legacy/direct-manipulation.md index f4a9ef83e6e..b3e7e063414 100644 --- a/docs/legacy/direct-manipulation.md +++ b/docs/legacy/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/docs/profiling.md b/docs/profiling.md index bd19ffa1aec..cec3698d2ef 100644 --- a/docs/profiling.md +++ b/docs/profiling.md @@ -93,7 +93,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/docs/roottag.md b/docs/roottag.md index c486b6f93c1..541724b9365 100644 --- a/docs/roottag.md +++ b/docs/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/docs/testing-overview.md b/docs/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/docs/testing-overview.md +++ b/docs/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/docs/the-new-architecture/direct-manipulation.md b/docs/the-new-architecture/direct-manipulation.md index c6dcd79c7ad..6708a643cba 100644 --- a/docs/the-new-architecture/direct-manipulation.md +++ b/docs/the-new-architecture/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps to edit TextInput value diff --git a/docs/tutorial.md b/docs/tutorial.md index 8d6df090468..d1a92919cd7 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.70/animated.md b/website/versioned_docs/version-0.70/animated.md index 4916c1c9636..fcd29a917e6 100644 --- a/website/versioned_docs/version-0.70/animated.md +++ b/website/versioned_docs/version-0.70/animated.md @@ -12,7 +12,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. diff --git a/website/versioned_docs/version-0.70/direct-manipulation.md b/website/versioned_docs/version-0.70/direct-manipulation.md index d82d87d4736..db4c522a3c5 100644 --- a/website/versioned_docs/version-0.70/direct-manipulation.md +++ b/website/versioned_docs/version-0.70/direct-manipulation.md @@ -15,7 +15,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -160,7 +160,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.70/fast-refresh.md b/website/versioned_docs/version-0.70/fast-refresh.md index a713c1fa8bd..10c8045eae4 100644 --- a/website/versioned_docs/version-0.70/fast-refresh.md +++ b/website/versioned_docs/version-0.70/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.70/imagebackground.md b/website/versioned_docs/version-0.70/imagebackground.md index 9d4e59bdd7a..b1e1a426104 100644 --- a/website/versioned_docs/version-0.70/imagebackground.md +++ b/website/versioned_docs/version-0.70/imagebackground.md @@ -70,9 +70,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.70/intro-react-native-components.md b/website/versioned_docs/version-0.70/intro-react-native-components.md index 54eb7f69311..a2d7e69d89d 100644 --- a/website/versioned_docs/version-0.70/intro-react-native-components.md +++ b/website/versioned_docs/version-0.70/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.70/intro-react.md b/website/versioned_docs/version-0.70/intro-react.md index 2b990cb3d44..876dca8fb98 100644 --- a/website/versioned_docs/version-0.70/intro-react.md +++ b/website/versioned_docs/version-0.70/intro-react.md @@ -6,7 +6,7 @@ description: To understand React Native fully, you need a solid foundation in Re import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -React Native runs on [React](https://reactjs.org/), a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course. +React Native runs on [React](https://react.dev/), a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course. We’re going to cover the core concepts behind React: @@ -133,7 +133,7 @@ Now take a closer look at that `return` statement. `Hello, I am your cat!< ## JSX -React and React Native use **JSX,** a syntax that lets you write elements inside JavaScript like so: `Hello, I am your cat!`. The React docs have [a comprehensive guide to JSX](https://reactjs.org/docs/jsx-in-depth.html) you can refer to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, `name`, and embedding it with curly braces inside ``. +React and React Native use **JSX,** a syntax that lets you write elements inside JavaScript like so: `Hello, I am your cat!`. The React docs have [a comprehensive guide to JSX](https://react.dev/learn/writing-markup-with-jsx.html) you can refer to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, `name`, and embedding it with curly braces inside ``. ```SnackPlayer name=Curly%20Braces import React from 'react'; diff --git a/website/versioned_docs/version-0.70/javascript-environment.md b/website/versioned_docs/version-0.70/javascript-environment.md index 7067e2a8d3d..7d26529b19f 100644 --- a/website/versioned_docs/version-0.70/javascript-environment.md +++ b/website/versioned_docs/version-0.70/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md index 23f15207f69..b25fc5ca160 100644 --- a/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md @@ -97,7 +97,7 @@ The heavier your components are, the slower they render. Avoid heavy images (use ### Use shouldComponentUpdate -Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use +Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use ```jsx shouldComponentUpdate() { diff --git a/website/versioned_docs/version-0.70/profiling.md b/website/versioned_docs/version-0.70/profiling.md index f9412791588..800604648d7 100644 --- a/website/versioned_docs/version-0.70/profiling.md +++ b/website/versioned_docs/version-0.70/profiling.md @@ -113,7 +113,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.70/roottag.md b/website/versioned_docs/version-0.70/roottag.md index 691055de97d..bff5be02b4f 100644 --- a/website/versioned_docs/version-0.70/roottag.md +++ b/website/versioned_docs/version-0.70/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.70/testing-overview.md b/website/versioned_docs/version-0.70/testing-overview.md index 9bb25763527..d6b58e17c0b 100644 --- a/website/versioned_docs/version-0.70/testing-overview.md +++ b/website/versioned_docs/version-0.70/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.70/tutorial.md b/website/versioned_docs/version-0.70/tutorial.md index d7384adf8ec..8e46b973885 100644 --- a/website/versioned_docs/version-0.70/tutorial.md +++ b/website/versioned_docs/version-0.70/tutorial.md @@ -37,7 +37,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -100,7 +100,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -173,7 +173,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.71/animated.md b/website/versioned_docs/version-0.71/animated.md index d5d2e4f39e8..ee3861745de 100644 --- a/website/versioned_docs/version-0.71/animated.md +++ b/website/versioned_docs/version-0.71/animated.md @@ -12,7 +12,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. diff --git a/website/versioned_docs/version-0.71/direct-manipulation.md b/website/versioned_docs/version-0.71/direct-manipulation.md index 4de4a9a20aa..b6ab6762101 100644 --- a/website/versioned_docs/version-0.71/direct-manipulation.md +++ b/website/versioned_docs/version-0.71/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.71/fast-refresh.md b/website/versioned_docs/version-0.71/fast-refresh.md index a713c1fa8bd..10c8045eae4 100644 --- a/website/versioned_docs/version-0.71/fast-refresh.md +++ b/website/versioned_docs/version-0.71/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.71/imagebackground.md b/website/versioned_docs/version-0.71/imagebackground.md index 74a6ba22390..1eeb073c74c 100644 --- a/website/versioned_docs/version-0.71/imagebackground.md +++ b/website/versioned_docs/version-0.71/imagebackground.md @@ -70,9 +70,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.71/intro-react-native-components.md b/website/versioned_docs/version-0.71/intro-react-native-components.md index 62bdcc4ec55..f1b9b6d522a 100644 --- a/website/versioned_docs/version-0.71/intro-react-native-components.md +++ b/website/versioned_docs/version-0.71/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.71/intro-react.md b/website/versioned_docs/version-0.71/intro-react.md index f2483c4b3a6..9ef24d4d9f5 100644 --- a/website/versioned_docs/version-0.71/intro-react.md +++ b/website/versioned_docs/version-0.71/intro-react.md @@ -6,7 +6,7 @@ description: To understand React Native fully, you need a solid foundation in Re import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -React Native runs on [React](https://reactjs.org/), a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course. +React Native runs on [React](https://react.dev/), a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course. We’re going to cover the core concepts behind React: @@ -129,7 +129,7 @@ Now take a closer look at that `return` statement. `Hello, I am your cat!< ## JSX -React and React Native use **JSX,** a syntax that lets you write elements inside JavaScript like so: `Hello, I am your cat!`. The React docs have [a comprehensive guide to JSX](https://reactjs.org/docs/jsx-in-depth.html) you can refer to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, `name`, and embedding it with curly braces inside ``. +React and React Native use **JSX,** a syntax that lets you write elements inside JavaScript like so: `Hello, I am your cat!`. The React docs have [a comprehensive guide to JSX](https://react.dev/learn/writing-markup-with-jsx.html) you can refer to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, `name`, and embedding it with curly braces inside ``. ```SnackPlayer name=Curly%20Braces import React from 'react'; diff --git a/website/versioned_docs/version-0.71/javascript-environment.md b/website/versioned_docs/version-0.71/javascript-environment.md index bcb41606b48..e7941d47459 100644 --- a/website/versioned_docs/version-0.71/javascript-environment.md +++ b/website/versioned_docs/version-0.71/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md index 61285728049..98a928be522 100644 --- a/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md @@ -97,7 +97,7 @@ The heavier your components are, the slower they render. Avoid heavy images (use ### Use shouldComponentUpdate -Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use +Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use ```tsx shouldComponentUpdate() { diff --git a/website/versioned_docs/version-0.71/profiling.md b/website/versioned_docs/version-0.71/profiling.md index f9412791588..800604648d7 100644 --- a/website/versioned_docs/version-0.71/profiling.md +++ b/website/versioned_docs/version-0.71/profiling.md @@ -113,7 +113,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.71/roottag.md b/website/versioned_docs/version-0.71/roottag.md index 10f5c4be6b7..2d3fa33143d 100644 --- a/website/versioned_docs/version-0.71/roottag.md +++ b/website/versioned_docs/version-0.71/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.71/testing-overview.md b/website/versioned_docs/version-0.71/testing-overview.md index 7b38f03652d..efdf6494374 100644 --- a/website/versioned_docs/version-0.71/testing-overview.md +++ b/website/versioned_docs/version-0.71/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.71/tutorial.md b/website/versioned_docs/version-0.71/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.71/tutorial.md +++ b/website/versioned_docs/version-0.71/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.72/animated.md b/website/versioned_docs/version-0.72/animated.md index b37bd292799..35862b69d0a 100644 --- a/website/versioned_docs/version-0.72/animated.md +++ b/website/versioned_docs/version-0.72/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.72/direct-manipulation.md b/website/versioned_docs/version-0.72/direct-manipulation.md index 0760a1c7b71..9e7b1fe2d98 100644 --- a/website/versioned_docs/version-0.72/direct-manipulation.md +++ b/website/versioned_docs/version-0.72/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.72/fast-refresh.md b/website/versioned_docs/version-0.72/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.72/fast-refresh.md +++ b/website/versioned_docs/version-0.72/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.72/imagebackground.md b/website/versioned_docs/version-0.72/imagebackground.md index d3de9ae8b8d..3b05fab147a 100644 --- a/website/versioned_docs/version-0.72/imagebackground.md +++ b/website/versioned_docs/version-0.72/imagebackground.md @@ -70,9 +70,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.72/intro-react-native-components.md b/website/versioned_docs/version-0.72/intro-react-native-components.md index 62bdcc4ec55..f1b9b6d522a 100644 --- a/website/versioned_docs/version-0.72/intro-react-native-components.md +++ b/website/versioned_docs/version-0.72/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.72/javascript-environment.md b/website/versioned_docs/version-0.72/javascript-environment.md index bcb41606b48..e7941d47459 100644 --- a/website/versioned_docs/version-0.72/javascript-environment.md +++ b/website/versioned_docs/version-0.72/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.72/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.72/optimizing-flatlist-configuration.md index cb251c78a42..0fb42186919 100644 --- a/website/versioned_docs/version-0.72/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.72/optimizing-flatlist-configuration.md @@ -95,7 +95,7 @@ The heavier your components are, the slower they render. Avoid heavy images (use ### Use shouldComponentUpdate -Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use +Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use ```tsx shouldComponentUpdate() { diff --git a/website/versioned_docs/version-0.72/profiling.md b/website/versioned_docs/version-0.72/profiling.md index e3985bfd198..4b5aac9b187 100644 --- a/website/versioned_docs/version-0.72/profiling.md +++ b/website/versioned_docs/version-0.72/profiling.md @@ -113,7 +113,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.72/roottag.md b/website/versioned_docs/version-0.72/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.72/roottag.md +++ b/website/versioned_docs/version-0.72/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.72/testing-overview.md b/website/versioned_docs/version-0.72/testing-overview.md index 63d480f35e1..d87fd4075b5 100644 --- a/website/versioned_docs/version-0.72/testing-overview.md +++ b/website/versioned_docs/version-0.72/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.72/tutorial.md b/website/versioned_docs/version-0.72/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.72/tutorial.md +++ b/website/versioned_docs/version-0.72/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.73/animated.md b/website/versioned_docs/version-0.73/animated.md index f8f518717fc..1efa090b3f9 100644 --- a/website/versioned_docs/version-0.73/animated.md +++ b/website/versioned_docs/version-0.73/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.73/direct-manipulation.md b/website/versioned_docs/version-0.73/direct-manipulation.md index 0760a1c7b71..9e7b1fe2d98 100644 --- a/website/versioned_docs/version-0.73/direct-manipulation.md +++ b/website/versioned_docs/version-0.73/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.73/fast-refresh.md b/website/versioned_docs/version-0.73/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.73/fast-refresh.md +++ b/website/versioned_docs/version-0.73/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.73/imagebackground.md b/website/versioned_docs/version-0.73/imagebackground.md index d3de9ae8b8d..3b05fab147a 100644 --- a/website/versioned_docs/version-0.73/imagebackground.md +++ b/website/versioned_docs/version-0.73/imagebackground.md @@ -70,9 +70,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.73/intro-react-native-components.md b/website/versioned_docs/version-0.73/intro-react-native-components.md index 62bdcc4ec55..f1b9b6d522a 100644 --- a/website/versioned_docs/version-0.73/intro-react-native-components.md +++ b/website/versioned_docs/version-0.73/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.73/javascript-environment.md b/website/versioned_docs/version-0.73/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.73/javascript-environment.md +++ b/website/versioned_docs/version-0.73/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.73/profiling.md b/website/versioned_docs/version-0.73/profiling.md index e3985bfd198..4b5aac9b187 100644 --- a/website/versioned_docs/version-0.73/profiling.md +++ b/website/versioned_docs/version-0.73/profiling.md @@ -113,7 +113,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.73/roottag.md b/website/versioned_docs/version-0.73/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.73/roottag.md +++ b/website/versioned_docs/version-0.73/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.73/testing-overview.md b/website/versioned_docs/version-0.73/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.73/testing-overview.md +++ b/website/versioned_docs/version-0.73/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.73/tutorial.md b/website/versioned_docs/version-0.73/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.73/tutorial.md +++ b/website/versioned_docs/version-0.73/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.74/animated.md b/website/versioned_docs/version-0.74/animated.md index f8f518717fc..1efa090b3f9 100644 --- a/website/versioned_docs/version-0.74/animated.md +++ b/website/versioned_docs/version-0.74/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.74/direct-manipulation.md b/website/versioned_docs/version-0.74/direct-manipulation.md index 0760a1c7b71..9e7b1fe2d98 100644 --- a/website/versioned_docs/version-0.74/direct-manipulation.md +++ b/website/versioned_docs/version-0.74/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.74/fast-refresh.md b/website/versioned_docs/version-0.74/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.74/fast-refresh.md +++ b/website/versioned_docs/version-0.74/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.74/imagebackground.md b/website/versioned_docs/version-0.74/imagebackground.md index d3de9ae8b8d..3b05fab147a 100644 --- a/website/versioned_docs/version-0.74/imagebackground.md +++ b/website/versioned_docs/version-0.74/imagebackground.md @@ -70,9 +70,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.74/intro-react-native-components.md b/website/versioned_docs/version-0.74/intro-react-native-components.md index 62bdcc4ec55..f1b9b6d522a 100644 --- a/website/versioned_docs/version-0.74/intro-react-native-components.md +++ b/website/versioned_docs/version-0.74/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.74/javascript-environment.md b/website/versioned_docs/version-0.74/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.74/javascript-environment.md +++ b/website/versioned_docs/version-0.74/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.74/profiling.md b/website/versioned_docs/version-0.74/profiling.md index e3985bfd198..4b5aac9b187 100644 --- a/website/versioned_docs/version-0.74/profiling.md +++ b/website/versioned_docs/version-0.74/profiling.md @@ -113,7 +113,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.74/roottag.md b/website/versioned_docs/version-0.74/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.74/roottag.md +++ b/website/versioned_docs/version-0.74/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.74/testing-overview.md b/website/versioned_docs/version-0.74/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.74/testing-overview.md +++ b/website/versioned_docs/version-0.74/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.74/tutorial.md b/website/versioned_docs/version-0.74/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.74/tutorial.md +++ b/website/versioned_docs/version-0.74/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.75/animated.md b/website/versioned_docs/version-0.75/animated.md index f8f518717fc..1efa090b3f9 100644 --- a/website/versioned_docs/version-0.75/animated.md +++ b/website/versioned_docs/version-0.75/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.75/direct-manipulation.md b/website/versioned_docs/version-0.75/direct-manipulation.md index 019a87be99f..3233d2ee595 100644 --- a/website/versioned_docs/version-0.75/direct-manipulation.md +++ b/website/versioned_docs/version-0.75/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.75/fast-refresh.md b/website/versioned_docs/version-0.75/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.75/fast-refresh.md +++ b/website/versioned_docs/version-0.75/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.75/imagebackground.md b/website/versioned_docs/version-0.75/imagebackground.md index d3de9ae8b8d..3b05fab147a 100644 --- a/website/versioned_docs/version-0.75/imagebackground.md +++ b/website/versioned_docs/version-0.75/imagebackground.md @@ -70,9 +70,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.75/intro-react-native-components.md b/website/versioned_docs/version-0.75/intro-react-native-components.md index 62bdcc4ec55..f1b9b6d522a 100644 --- a/website/versioned_docs/version-0.75/intro-react-native-components.md +++ b/website/versioned_docs/version-0.75/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.75/javascript-environment.md b/website/versioned_docs/version-0.75/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.75/javascript-environment.md +++ b/website/versioned_docs/version-0.75/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.75/profiling.md b/website/versioned_docs/version-0.75/profiling.md index e3985bfd198..4b5aac9b187 100644 --- a/website/versioned_docs/version-0.75/profiling.md +++ b/website/versioned_docs/version-0.75/profiling.md @@ -113,7 +113,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.75/roottag.md b/website/versioned_docs/version-0.75/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.75/roottag.md +++ b/website/versioned_docs/version-0.75/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.75/testing-overview.md b/website/versioned_docs/version-0.75/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.75/testing-overview.md +++ b/website/versioned_docs/version-0.75/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.75/tutorial.md b/website/versioned_docs/version-0.75/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.75/tutorial.md +++ b/website/versioned_docs/version-0.75/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.76/animated.md b/website/versioned_docs/version-0.76/animated.md index 9b51f282b20..8769df066ff 100644 --- a/website/versioned_docs/version-0.76/animated.md +++ b/website/versioned_docs/version-0.76/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.76/fast-refresh.md b/website/versioned_docs/version-0.76/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.76/fast-refresh.md +++ b/website/versioned_docs/version-0.76/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.76/imagebackground.md b/website/versioned_docs/version-0.76/imagebackground.md index 6b601f4136e..eba3b41b683 100644 --- a/website/versioned_docs/version-0.76/imagebackground.md +++ b/website/versioned_docs/version-0.76/imagebackground.md @@ -73,9 +73,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.76/intro-react-native-components.md b/website/versioned_docs/version-0.76/intro-react-native-components.md index 8d031e48b02..eb585964154 100644 --- a/website/versioned_docs/version-0.76/intro-react-native-components.md +++ b/website/versioned_docs/version-0.76/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.76/javascript-environment.md b/website/versioned_docs/version-0.76/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.76/javascript-environment.md +++ b/website/versioned_docs/version-0.76/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.76/legacy/direct-manipulation.md b/website/versioned_docs/version-0.76/legacy/direct-manipulation.md index f4a9ef83e6e..b3e7e063414 100644 --- a/website/versioned_docs/version-0.76/legacy/direct-manipulation.md +++ b/website/versioned_docs/version-0.76/legacy/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.76/profiling.md b/website/versioned_docs/version-0.76/profiling.md index e3bf71690f2..bccd96e65ea 100644 --- a/website/versioned_docs/version-0.76/profiling.md +++ b/website/versioned_docs/version-0.76/profiling.md @@ -111,7 +111,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.76/roottag.md b/website/versioned_docs/version-0.76/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.76/roottag.md +++ b/website/versioned_docs/version-0.76/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.76/testing-overview.md b/website/versioned_docs/version-0.76/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.76/testing-overview.md +++ b/website/versioned_docs/version-0.76/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.76/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.76/the-new-architecture/direct-manipulation.md index c6dcd79c7ad..6708a643cba 100644 --- a/website/versioned_docs/version-0.76/the-new-architecture/direct-manipulation.md +++ b/website/versioned_docs/version-0.76/the-new-architecture/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps to edit TextInput value diff --git a/website/versioned_docs/version-0.76/tutorial.md b/website/versioned_docs/version-0.76/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.76/tutorial.md +++ b/website/versioned_docs/version-0.76/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.77/animated.md b/website/versioned_docs/version-0.77/animated.md index b74541b2281..dacbb306d79 100644 --- a/website/versioned_docs/version-0.77/animated.md +++ b/website/versioned_docs/version-0.77/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.77/fast-refresh.md b/website/versioned_docs/version-0.77/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.77/fast-refresh.md +++ b/website/versioned_docs/version-0.77/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.77/imagebackground.md b/website/versioned_docs/version-0.77/imagebackground.md index 6b601f4136e..eba3b41b683 100644 --- a/website/versioned_docs/version-0.77/imagebackground.md +++ b/website/versioned_docs/version-0.77/imagebackground.md @@ -73,9 +73,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.77/intro-react-native-components.md b/website/versioned_docs/version-0.77/intro-react-native-components.md index 8d031e48b02..eb585964154 100644 --- a/website/versioned_docs/version-0.77/intro-react-native-components.md +++ b/website/versioned_docs/version-0.77/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.77/javascript-environment.md b/website/versioned_docs/version-0.77/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.77/javascript-environment.md +++ b/website/versioned_docs/version-0.77/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.77/legacy/direct-manipulation.md b/website/versioned_docs/version-0.77/legacy/direct-manipulation.md index f4a9ef83e6e..b3e7e063414 100644 --- a/website/versioned_docs/version-0.77/legacy/direct-manipulation.md +++ b/website/versioned_docs/version-0.77/legacy/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.77/profiling.md b/website/versioned_docs/version-0.77/profiling.md index bd19ffa1aec..cec3698d2ef 100644 --- a/website/versioned_docs/version-0.77/profiling.md +++ b/website/versioned_docs/version-0.77/profiling.md @@ -93,7 +93,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.77/roottag.md b/website/versioned_docs/version-0.77/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.77/roottag.md +++ b/website/versioned_docs/version-0.77/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.77/testing-overview.md b/website/versioned_docs/version-0.77/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.77/testing-overview.md +++ b/website/versioned_docs/version-0.77/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.77/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.77/the-new-architecture/direct-manipulation.md index c6dcd79c7ad..6708a643cba 100644 --- a/website/versioned_docs/version-0.77/the-new-architecture/direct-manipulation.md +++ b/website/versioned_docs/version-0.77/the-new-architecture/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps to edit TextInput value diff --git a/website/versioned_docs/version-0.77/tutorial.md b/website/versioned_docs/version-0.77/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.77/tutorial.md +++ b/website/versioned_docs/version-0.77/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.78/animated.md b/website/versioned_docs/version-0.78/animated.md index b74541b2281..dacbb306d79 100644 --- a/website/versioned_docs/version-0.78/animated.md +++ b/website/versioned_docs/version-0.78/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.78/fast-refresh.md b/website/versioned_docs/version-0.78/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.78/fast-refresh.md +++ b/website/versioned_docs/version-0.78/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.78/imagebackground.md b/website/versioned_docs/version-0.78/imagebackground.md index 6b601f4136e..eba3b41b683 100644 --- a/website/versioned_docs/version-0.78/imagebackground.md +++ b/website/versioned_docs/version-0.78/imagebackground.md @@ -73,9 +73,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.78/intro-react-native-components.md b/website/versioned_docs/version-0.78/intro-react-native-components.md index 8d031e48b02..eb585964154 100644 --- a/website/versioned_docs/version-0.78/intro-react-native-components.md +++ b/website/versioned_docs/version-0.78/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.78/javascript-environment.md b/website/versioned_docs/version-0.78/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.78/javascript-environment.md +++ b/website/versioned_docs/version-0.78/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.78/legacy/direct-manipulation.md b/website/versioned_docs/version-0.78/legacy/direct-manipulation.md index f4a9ef83e6e..b3e7e063414 100644 --- a/website/versioned_docs/version-0.78/legacy/direct-manipulation.md +++ b/website/versioned_docs/version-0.78/legacy/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.78/profiling.md b/website/versioned_docs/version-0.78/profiling.md index bd19ffa1aec..cec3698d2ef 100644 --- a/website/versioned_docs/version-0.78/profiling.md +++ b/website/versioned_docs/version-0.78/profiling.md @@ -93,7 +93,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.78/roottag.md b/website/versioned_docs/version-0.78/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.78/roottag.md +++ b/website/versioned_docs/version-0.78/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.78/testing-overview.md b/website/versioned_docs/version-0.78/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.78/testing-overview.md +++ b/website/versioned_docs/version-0.78/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.78/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.78/the-new-architecture/direct-manipulation.md index c6dcd79c7ad..6708a643cba 100644 --- a/website/versioned_docs/version-0.78/the-new-architecture/direct-manipulation.md +++ b/website/versioned_docs/version-0.78/the-new-architecture/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps to edit TextInput value diff --git a/website/versioned_docs/version-0.78/tutorial.md b/website/versioned_docs/version-0.78/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.78/tutorial.md +++ b/website/versioned_docs/version-0.78/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.79/animated.md b/website/versioned_docs/version-0.79/animated.md index b74541b2281..dacbb306d79 100644 --- a/website/versioned_docs/version-0.79/animated.md +++ b/website/versioned_docs/version-0.79/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.79/fast-refresh.md b/website/versioned_docs/version-0.79/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.79/fast-refresh.md +++ b/website/versioned_docs/version-0.79/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.79/imagebackground.md b/website/versioned_docs/version-0.79/imagebackground.md index 6b601f4136e..eba3b41b683 100644 --- a/website/versioned_docs/version-0.79/imagebackground.md +++ b/website/versioned_docs/version-0.79/imagebackground.md @@ -73,9 +73,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.79/intro-react-native-components.md b/website/versioned_docs/version-0.79/intro-react-native-components.md index 8d031e48b02..eb585964154 100644 --- a/website/versioned_docs/version-0.79/intro-react-native-components.md +++ b/website/versioned_docs/version-0.79/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.79/javascript-environment.md b/website/versioned_docs/version-0.79/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.79/javascript-environment.md +++ b/website/versioned_docs/version-0.79/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.79/legacy/direct-manipulation.md b/website/versioned_docs/version-0.79/legacy/direct-manipulation.md index f4a9ef83e6e..b3e7e063414 100644 --- a/website/versioned_docs/version-0.79/legacy/direct-manipulation.md +++ b/website/versioned_docs/version-0.79/legacy/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.79/profiling.md b/website/versioned_docs/version-0.79/profiling.md index bd19ffa1aec..cec3698d2ef 100644 --- a/website/versioned_docs/version-0.79/profiling.md +++ b/website/versioned_docs/version-0.79/profiling.md @@ -93,7 +93,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.79/roottag.md b/website/versioned_docs/version-0.79/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.79/roottag.md +++ b/website/versioned_docs/version-0.79/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.79/testing-overview.md b/website/versioned_docs/version-0.79/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.79/testing-overview.md +++ b/website/versioned_docs/version-0.79/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.79/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.79/the-new-architecture/direct-manipulation.md index c6dcd79c7ad..6708a643cba 100644 --- a/website/versioned_docs/version-0.79/the-new-architecture/direct-manipulation.md +++ b/website/versioned_docs/version-0.79/the-new-architecture/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps to edit TextInput value diff --git a/website/versioned_docs/version-0.79/tutorial.md b/website/versioned_docs/version-0.79/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.79/tutorial.md +++ b/website/versioned_docs/version-0.79/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes. diff --git a/website/versioned_docs/version-0.80/animated.md b/website/versioned_docs/version-0.80/animated.md index b74541b2281..dacbb306d79 100644 --- a/website/versioned_docs/version-0.80/animated.md +++ b/website/versioned_docs/version-0.80/animated.md @@ -7,7 +7,7 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. ## Example diff --git a/website/versioned_docs/version-0.80/fast-refresh.md b/website/versioned_docs/version-0.80/fast-refresh.md index 53f60ac249d..89010b75065 100644 --- a/website/versioned_docs/version-0.80/fast-refresh.md +++ b/website/versioned_docs/version-0.80/fast-refresh.md @@ -19,7 +19,7 @@ If you make a **runtime error during the module initialization** (for example, t If you make a mistake that leads to a **runtime error inside your component**, the Fast Refresh session will _also_ continue after you fix the error. In that case, React will remount your application using the updated code. -If you have [error boundaries](https://reactjs.org/docs/error-boundaries.html) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. +If you have [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn't be _too_ granular. They are used by React in production, and should always be designed intentionally. ## Limitations diff --git a/website/versioned_docs/version-0.80/imagebackground.md b/website/versioned_docs/version-0.80/imagebackground.md index 6b601f4136e..eba3b41b683 100644 --- a/website/versioned_docs/version-0.80/imagebackground.md +++ b/website/versioned_docs/version-0.80/imagebackground.md @@ -73,9 +73,9 @@ Inherits [Image Props](image.md#props). Allows to set a reference to the inner `Image` component -| Type | -| ----------------------------------------------------- | -| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | +| Type | +| ------------------------------------------------------------- | +| [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) | --- diff --git a/website/versioned_docs/version-0.80/intro-react-native-components.md b/website/versioned_docs/version-0.80/intro-react-native-components.md index 8d031e48b02..eb585964154 100644 --- a/website/versioned_docs/version-0.80/intro-react-native-components.md +++ b/website/versioned_docs/version-0.80/intro-react-native-components.md @@ -6,7 +6,7 @@ description: 'React Native lets you compose app interfaces using Native Componen import ThemedImage from '@theme/ThemedImage'; -React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. +React Native is an open source framework for building Android and iOS applications using [React](https://react.dev/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. ## Views and mobile development diff --git a/website/versioned_docs/version-0.80/javascript-environment.md b/website/versioned_docs/version-0.80/javascript-environment.md index 6f9bd0fac0d..ab041dd34cd 100644 --- a/website/versioned_docs/version-0.80/javascript-environment.md +++ b/website/versioned_docs/version-0.80/javascript-environment.md @@ -71,7 +71,7 @@ A full list of React Native's enabled transformations can be found in [@react-na - + diff --git a/website/versioned_docs/version-0.80/legacy/direct-manipulation.md b/website/versioned_docs/version-0.80/legacy/direct-manipulation.md index f4a9ef83e6e..b3e7e063414 100644 --- a/website/versioned_docs/version-0.80/legacy/direct-manipulation.md +++ b/website/versioned_docs/version-0.80/legacy/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps with TouchableOpacity @@ -278,7 +278,7 @@ If you update a property that is also managed by the render function, you might ## setNativeProps & shouldComponentUpdate -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. +By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. ## Other native methods diff --git a/website/versioned_docs/version-0.80/profiling.md b/website/versioned_docs/version-0.80/profiling.md index bd19ffa1aec..cec3698d2ef 100644 --- a/website/versioned_docs/version-0.80/profiling.md +++ b/website/versioned_docs/version-0.80/profiling.md @@ -93,7 +93,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://react.dev/reference/react/Component#shouldcomponentupdate). ## Resolving native UI Issues diff --git a/website/versioned_docs/version-0.80/roottag.md b/website/versioned_docs/version-0.80/roottag.md index c486b6f93c1..541724b9365 100644 --- a/website/versioned_docs/version-0.80/roottag.md +++ b/website/versioned_docs/version-0.80/roottag.md @@ -21,7 +21,7 @@ Another use case for `RootTag` is when your app needs to attribute a certain Jav ## How to access the RootTag... if you need it -In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://reactjs.org/docs/context.html#api) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. +In versions 0.65 and below, RootTag is accessed via a [legacy context](https://github.com/facebook/react-native/blob/v0.64.1/Libraries/ReactNative/AppContainer.js#L56). To prepare React Native for Concurrent features coming in React 18 and beyond, we are migrating to the latest [Context API](https://react.dev/reference/react/createContext) via `RootTagContext` in 0.66. Version 0.65 supports both the legacy context and the recommended `RootTagContext` to allow developers time to migrate their call-sites. See the breaking changes summary. How to access `RootTag` via the `RootTagContext`. @@ -59,7 +59,7 @@ class ScreenB extends React.Component { } ``` -Learn more about the Context API for [classes](https://reactjs.org/docs/context.html#classcontexttype) and [hooks](https://reactjs.org/docs/hooks-reference.html#usecontext) from the React docs. +Learn more about the Context API for [classes](https://react.dev/reference/react/Component#static-contexttype) and [hooks](https://react.dev/reference/react/useContext) from the React docs. ### Breaking Change in 0.65 diff --git a/website/versioned_docs/version-0.80/testing-overview.md b/website/versioned_docs/version-0.80/testing-overview.md index 5714c365ff6..ae00c6269f1 100644 --- a/website/versioned_docs/version-0.80/testing-overview.md +++ b/website/versioned_docs/version-0.80/testing-overview.md @@ -127,8 +127,8 @@ For example, if you have a button that has an `onPress` listener, you want to te There are several libraries that can help you testing these: -- React’s [Test Renderer](https://reactjs.org/docs/test-renderer.html), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph. +- [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. @@ -261,7 +261,7 @@ We hope you enjoyed reading and learned something from this guide. There are man ### Links -- [React testing overview](https://reactjs.org/docs/testing.html) +- [React testing overview](https://react.dev/reference/react/act) - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) diff --git a/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md index c6dcd79c7ad..6708a643cba 100644 --- a/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md +++ b/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md @@ -13,7 +13,7 @@ Use `setNativeProps` when frequent re-rendering creates a performance bottleneck Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. -Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action). +Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate). ::: ## setNativeProps to edit TextInput value diff --git a/website/versioned_docs/version-0.80/tutorial.md b/website/versioned_docs/version-0.80/tutorial.md index 8d6df090468..2430a828bcc 100644 --- a/website/versioned_docs/version-0.80/tutorial.md +++ b/website/versioned_docs/version-0.80/tutorial.md @@ -39,7 +39,7 @@ If you are feeling curious, you can play around with sample code directly in the 1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform. 2. On line 2, we import the `Text` and `View` components from `react-native` -Then we define the `HelloWorldApp` function, which is a [functional component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. +Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child. The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing. @@ -146,7 +146,7 @@ With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`]( ## State -Unlike props [that are read-only](https://reactjs.org/docs/components-and-props.html#props-are-read-only) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. +Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else. #### What's the difference between state and props in React? @@ -219,7 +219,7 @@ const styles = StyleSheet.create({ -As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! +As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)! In the following example we will show the same above counter example using classes.