diff --git a/questions/explain-the-composition-pattern-in-react/en-US.mdx b/questions/explain-the-composition-pattern-in-react/en-US.mdx index e6b6526..6cb3aed 100644 --- a/questions/explain-the-composition-pattern-in-react/en-US.mdx +++ b/questions/explain-the-composition-pattern-in-react/en-US.mdx @@ -82,6 +82,6 @@ function App() { ## Further reading -- [React documentation on composition vs inheritance](https://reactjs.org/docs/composition-vs-inheritance.html) +- [Composition in React](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/) - [React patterns: Composition](https://reactpatterns.com/#composition) - [Medium article on React composition](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) diff --git a/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx b/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx index 5c90e45..380a824 100644 --- a/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx +++ b/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx @@ -24,24 +24,19 @@ The virtual DOM is a concept where a virtual representation of the UI is kept in ### Code example ```jsx -class MyComponent extends React.Component { - constructor(props) { - super(props); - this.state = { count: 0 }; - } - - increment = () => { - this.setState({ count: this.state.count + 1 }); - }; - - render() { - return ( -
-

{this.state.count}

- -
- ); - } +import { useState } from 'react'; + +function MyComponent() { + const [count, setCount] = useState(0); + + const increment = () => setCount(count + 1); + + return ( +
+

{count}

+ +
+ ); } ``` @@ -75,6 +70,5 @@ In this example, when the button is clicked, the state changes, triggering a new ## Further reading -- [React documentation on reconciliation](https://reactjs.org/docs/reconciliation.html) -- [Understanding the virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) -- [React performance optimization](https://reactjs.org/docs/optimizing-performance.html) +- [React Docs on Reconciliation](https://react.dev/learn/render-and-commit) +- [What is the Virtual DOM in React?](https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/) diff --git a/questions/what-are-react-fragments-used-for/en-US.mdx b/questions/what-are-react-fragments-used-for/en-US.mdx index 72c7fe7..353bead 100644 --- a/questions/what-are-react-fragments-used-for/en-US.mdx +++ b/questions/what-are-react-fragments-used-for/en-US.mdx @@ -59,11 +59,13 @@ If you need to add keys to the elements within a fragment, you must use the full ```jsx return ( - + <> {items.map((item) => ( - + + + ))} - + ); ``` diff --git a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx index cc4930f..4f5539f 100644 --- a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx @@ -108,4 +108,4 @@ In this example, `prevCountRef` is used to keep a reference to the previous valu - [React documentation on `useRef`](https://reactjs.org/docs/hooks-reference.html#useref) - [Using the `useRef` hook](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables) -- [Common use cases for `useRef`](https://blog.logrocket.com/how-to-use-react-useref-hook/) +- [Common use cases for `useRef`](https://dev.to/kirubelkinfe/mastering-useref-in-react-with-typescript-4-different-use-cases-for-useref-2a87)