misc: update deprecated reactjs.org to other links

contents/front-end-system-design-ui-components.md

@@ -78,8 +78,8 @@ The key idea behind components is for them to be reused and abstract complexitie
 - What are the configuration options you would allow for the component? (`props` in React). What would be reasonable defaults?
 - Follow the [Open-closed principle](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle) - the component should be open for extension but closed for modification.
 - If your component is meant to be part of a UI library that doesn't bother about the appearance and leaves the styling to the user, extra care has to go into the design of the props and to allow users to customize the look and feel of the components. There are a few ways to go about this in React:
-  - Composition - Props which accept React components which also promotes code reuse.
-  - Render props are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
+  - [Composition](https://tkdodo.eu/blog/component-composition-is-great-btw) - Props which accept React components which also promotes code reuse.
+  - [Render props](https://www.patterns.dev/react/render-props-pattern/) are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
   - `className` or `style` props - Allows users to inject class names and/or styling attributes to inner DOM elements. This could have negative consequences but is still a common way of allowing user to customize component appearance.
 - Possible configuration options:
   - Lifecycle/event hooks - `onClick`, `onChange`, `onBlur`, `onFocus`, etc.

packages/react-interview-playbook/contents/react-design-patterns/en-US.mdx

@@ -32,6 +32,8 @@ HOCs are useful for:
 
 Higher-order components were more useful in the pre-hooks era for adding functionality to components. Now that we have React hooks and the ability to create custom hooks, HOCs are no longer that widespread.
 
+Further reading on react.dev: [Higher-Order Components – React](https://www.patterns.dev/react/hoc-pattern/)
+
 ## Render props
 
 Render props involves passing a function that renders an element as a prop to a component. The component calls the prop with certain parameters, which is usually its own state.
@@ -73,6 +75,8 @@ Render props are useful for:
 - Scenarios where hooks aren't an option, such as class components
 - Headless components that provide logic and behavior while allowing customization of appearance
 
+Further reading on react.dev: [Render Props - React](https://www.patterns.dev/react/render-props-pattern/)
+
 ## Container/presentational pattern
 
 The Container/presentational pattern is a design pattern used in React to separate state management (logic) from UI rendering (presentation). It helps in making components reusable, maintainable, and testable by ensuring a clear separation of concerns.