Update links to the latest React documentation (#3675)

* feat: add Set JavaScript content

* refactor: update links to the latest react documentation

This commit updates all links that referred to outdated(legacy) React documentation to the latest version

src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md

@@ -5,6 +5,7 @@ Each component has several “lifecycle methods” that you can override to run
 Visit the following resources to learn more:
 
 - [The Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle)
+- [Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects)
 
 
 

src/data/roadmaps/react/content/103-rendering/101-lists-and-keys.md

@@ -5,5 +5,6 @@ When you render lists in React, you can use the `key` prop to specify a unique k
 Visit the following resources to learn more:
 
 - [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)
+- [Rendering Lists](https://react.dev/learn/rendering-lists)
 - [List components in React by Example](https://www.robinwieruch.de/react-list-component/)
-- [Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/)
+- [Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/)

src/data/roadmaps/react/content/103-rendering/103-refs.md

@@ -7,6 +7,8 @@ In the typical React dataflow, props are the only way that parent components int
 Visit the following resources to learn more:
 
 - [Refs and DOM](https://reactjs.org/docs/refs-and-the-dom.html)
+- [Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs)
+- [Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs)
 - [Examples of using refs in React](https://www.robinwieruch.de/react-ref/)
 - [The Complete Guide to useRef() and Refs in React](https://dmitripavlutin.com/react-useref-guide/)
 - [Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)

src/data/roadmaps/react/content/103-rendering/104-events.md

@@ -9,4 +9,5 @@ Visit the following resources to learn more:
 
 - [Handling Events in React](https://reactjs.org/docs/handling-events.html)
 - [Synthetic Events in React](https://reactjs.org/docs/events.html)
+- [Responding to Events](https://react.dev/learn/responding-to-events)
 - [React Event Handler](https://www.robinwieruch.de/react-event-handler/)

src/data/roadmaps/react/content/104-hooks/100-basic-hooks/100-use-state.md

@@ -4,5 +4,5 @@
 
 Visit the following resources to learn more:
 
-- [Using the State Hook](https://reactjs.org/docs/hooks-state.html)
+- [Using the State Hook](https://react.dev/reference/react/useState)
 - [React useState Hook by Example](https://www.robinwieruch.de/react-usestate-hook/)

src/data/roadmaps/react/content/104-hooks/100-basic-hooks/101-use-effect.md

@@ -4,5 +4,5 @@
 
 Visit the following resources to learn more:
 
-- [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
+- [Using the Effect Hook](https://react.dev/reference/react/useEffect)
 - [React useEffect Hook by Example](https://www.robinwieruch.de/react-useeffect-hook/)

src/data/roadmaps/react/content/104-hooks/100-basic-hooks/index.md

@@ -4,5 +4,4 @@ Hooks were introduced in React 16.8 and they let us use React's features-like ma
 
 Visit the following resources to learn more:
 
-- [Introduction to Hooks](https://reactjs.org/docs/hooks-intro.html)
-- [Hooks Reference](https://reactjs.org/docs/hooks-reference.html)
+- [Hooks Reference](https://react.dev/reference/react)

src/data/roadmaps/react/content/104-hooks/101-writing-your-own-hooks.md

@@ -5,5 +5,6 @@ Building your own Hooks lets you extract component logic into reusable functions
 Visit the following resources to learn more:
 
 - [Creating Custom Hooks](https://reactjs.org/docs/hooks-custom.html)
+- [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
 - [How to create a custom Hook (1)](https://www.freecodecamp.org/news/how-to-create-react-hooks/)
 - [How to create a custom Hook (2) followed by Examples](https://www.robinwieruch.de/react-custom-hook/)

src/data/roadmaps/react/content/104-hooks/102-common-hooks.md

@@ -4,8 +4,20 @@ React also has a lot of hooks that allow you to write more efficient React code.
 
 Visit the following resources to learn more:
 
-- [React Hooks Reference](https://reactjs.org/docs/hooks-reference.html#usereducer)
-- [useState Hook by Example](https://reactjs.org/docs/hooks-state.html)
+- [useCallback](https://react.dev/reference/react/useCallback)
+- [useContext](https://react.dev/reference/react/useContext)
+- [useDebugValue](https://react.dev/reference/react/useDebugValue)
+- [useDeferredValue](https://react.dev/reference/react/useDeferredValue)
+- [useEffect](https://react.dev/reference/react/useEffect)
+- [useId](https://react.dev/reference/react/useId)
+- [useImperativeHandle](https://react.dev/reference/react/useImperativeHandle)
+- [useInsertionEffect](https://react.dev/reference/react/useInsertionEffect)
+- [useLayoutEffect](https://react.dev/reference/react/useLayoutEffect)
+- [useReducer](https://react.dev/reference/react/useReducer)
+- [useRef](https://react.dev/reference/react/useRef)
+- [useState](https://react.dev/reference/react/useState)
+- [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore)
+- [useTransition](https://react.dev/reference/react/useTransition)
 - [useCallback Hook by Example](https://www.robinwieruch.de/react-usecallback-hook/)
 - [useMemo Hook by Example](https://www.robinwieruch.de/react-usememo-hook/)
 - [useContext Hook by Example](https://www.robinwieruch.de/react-usecontext-hook/)

src/data/roadmaps/react/content/104-hooks/index.md

@@ -4,5 +4,4 @@ Hooks were introduced in React 16.8 and they let us use React's features-like ma
 
 Visit the following resources to learn more:
 
-- [Introduction to Hooks](https://reactjs.org/docs/hooks-intro.html)
-- [Hooks Reference](https://reactjs.org/docs/hooks-reference.html)
+- [Hooks Reference](https://react.dev/reference/react)

src/data/roadmaps/react/content/106-state-management/100-context.md

@@ -6,5 +6,5 @@ In a typical React application, data is passed top-down (parent to child) via pr
 
 Visit the following resources to learn more:
 
-- [Official React Context Docs](https://reactjs.org/docs/context.html)
+- [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context)
 - [State with useContext and useState/useReducer](https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/)

src/data/roadmaps/react/content/112-suspense.md

@@ -11,4 +11,4 @@ Here is a general overview of how React Suspense works:
 
 Visit the following resources to learn more:
 
-- [React Suspense - Official Docs](https://reactjs.org/docs/react-api.html#suspense)
+- [React Suspense](https://react.dev/reference/react/Suspense)

src/data/roadmaps/react/content/113-portals.md

@@ -4,4 +4,4 @@ Portals provide a first-class way to render children into a DOM node that exists
 
 Visit the following resources to learn more:
 
-- [Portals in React](https://reactjs.org/docs/portals.html)
+- [Portals in React](https://react.dev/reference/react-dom/createPortal)