From 5b29181d954663f808268e45386cfa99dfd4b4f2 Mon Sep 17 00:00:00 2001 From: dsh Date: Thu, 10 Oct 2024 12:19:20 +0100 Subject: [PATCH] removed duplicate subtopic, replaced content, shifted nodes up (#7424) --- .../usecallback@2zrN65JZhCyNimi33g78f.md | 9 --- .../usecallback@dgoDNDtW2_q9R9yhkXrcz.md | 28 ++------ src/data/roadmaps/react/react.json | 68 ++++--------------- 3 files changed, 20 insertions(+), 85 deletions(-) delete mode 100644 src/data/roadmaps/react/content/usecallback@2zrN65JZhCyNimi33g78f.md diff --git a/src/data/roadmaps/react/content/usecallback@2zrN65JZhCyNimi33g78f.md b/src/data/roadmaps/react/content/usecallback@2zrN65JZhCyNimi33g78f.md deleted file mode 100644 index e296682da..000000000 --- a/src/data/roadmaps/react/content/usecallback@2zrN65JZhCyNimi33g78f.md +++ /dev/null @@ -1,9 +0,0 @@ -# useCallback - -`useCallback` is a React hook that returns a memoized version of a callback function. It's used to optimize performance by preventing unnecessary re-renders. Specifically, it helps avoid recreating functions when their dependencies haven't changed, which can be useful when passing callbacks to child components that rely on referential equality to prevent re-rendering. - -Visit the following resources to learn more: - -- [@article@React Documentation on useCallback](https://react.dev/reference/react/useCallback) -- [@article@useCallback Explained in Depth](https://kentcdodds.com/blog/usememo-and-usecallback) -- [@article@useCallback Hook: An Introductory Guide](https://dmitripavlutin.com/dont-overuse-react-usecallback/) diff --git a/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md b/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md index eddccdf48..e296682da 100644 --- a/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md +++ b/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md @@ -1,27 +1,9 @@ -# Common Hooks +# useCallback -React also has a lot of hooks that allow you to write more efficient React code. +`useCallback` is a React hook that returns a memoized version of a callback function. It's used to optimize performance by preventing unnecessary re-renders. Specifically, it helps avoid recreating functions when their dependencies haven't changed, which can be useful when passing callbacks to child components that rely on referential equality to prevent re-rendering. Visit the following resources to learn more: -- [@official@useCallback](https://react.dev/reference/react/useCallback) -- [@official@useContext](https://react.dev/reference/react/useContext) -- [@official@useDebugValue](https://react.dev/reference/react/useDebugValue) -- [@official@useDeferredValue](https://react.dev/reference/react/useDeferredValue) -- [@official@useEffect](https://react.dev/reference/react/useEffect) -- [@official@useId](https://react.dev/reference/react/useId) -- [@official@useImperativeHandle](https://react.dev/reference/react/useImperativeHandle) -- [@official@useInsertionEffect](https://react.dev/reference/react/useInsertionEffect) -- [@official@useLayoutEffect](https://react.dev/reference/react/useLayoutEffect) -- [@official@useReducer](https://react.dev/reference/react/useReducer) -- [@official@useRef](https://react.dev/reference/react/useRef) -- [@official@useState](https://react.dev/reference/react/useState) -- [@official@useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore) -- [@official@useTransition](https://react.dev/reference/react/useTransition) -- [@article@useCallback Hook by Example](https://www.robinwieruch.de/react-usecallback-hook/) -- [@article@useMemo Hook by Example](https://www.robinwieruch.de/react-usememo-hook/) -- [@article@useContext Hook by Example](https://www.robinwieruch.de/react-usecontext-hook/) -- [@article@useReducer Hook by Example](https://www.robinwieruch.de/react-usereducer-hook/) -- [@article@useReducer vs useState Hook](https://www.robinwieruch.de/react-usereducer-vs-usestate/) -- [@video@useDefferedValue Hook video](https://www.youtube.com/watch?v=jCGMedd6IWA) -- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) +- [@article@React Documentation on useCallback](https://react.dev/reference/react/useCallback) +- [@article@useCallback Explained in Depth](https://kentcdodds.com/blog/usememo-and-usecallback) +- [@article@useCallback Hook: An Introductory Guide](https://dmitripavlutin.com/dont-overuse-react-usecallback/) diff --git a/src/data/roadmaps/react/react.json b/src/data/roadmaps/react/react.json index 9d141c503..9b624689a 100644 --- a/src/data/roadmaps/react/react.json +++ b/src/data/roadmaps/react/react.json @@ -136,14 +136,14 @@ "id": "NeJdgNbsxiUjt_GBzub6Z", "type": "section", "position": { - "x": -249.52532545570534, + "x": -248.52532545570534, "y": 274.94433023898546 }, - "width": 248, - "height": 255, + "width": 247, + "height": 168, "style": { - "width": 248, - "height": 255 + "width": 247, + "height": 168 }, "selected": false, "data": { @@ -153,7 +153,7 @@ } }, "positionAbsolute": { - "x": -249.52532545570534, + "x": -248.52532545570534, "y": 274.94433023898546 }, "dragging": false, @@ -1199,7 +1199,7 @@ "type": "topic", "position": { "x": 57.04484613528689, - "y": 553.4443302389855 + "y": 541.5892656435051 }, "selected": false, "data": { @@ -1220,7 +1220,7 @@ }, "positionAbsolute": { "x": 57.04484613528689, - "y": 553.4443302389855 + "y": 541.5892656435051 }, "dragging": false, "resizing": false, @@ -1329,7 +1329,7 @@ "type": "subtopic", "position": { "x": -249.95515386471317, - "y": 532.9443302389855 + "y": 521.0892656435051 }, "selected": false, "data": { @@ -1356,7 +1356,7 @@ "dragging": false, "positionAbsolute": { "x": -249.95515386471317, - "y": 532.9443302389855 + "y": 521.0892656435051 }, "selectable": true, "focusable": true, @@ -1367,7 +1367,7 @@ "type": "label", "position": { "x": -195.52532545570534, - "y": 490 + "y": 478.14493540451963 }, "selected": false, "data": { @@ -1387,7 +1387,7 @@ }, "positionAbsolute": { "x": -195.52532545570534, - "y": 490 + "y": 478.14493540451963 }, "selectable": true, "focusable": true, @@ -1583,44 +1583,6 @@ "dragging": false, "resizing": false }, - { - "id": "2zrN65JZhCyNimi33g78f", - "type": "subtopic", - "position": { - "x": -241.52532545570534, - "y": 438.44433023898546 - }, - "selected": false, - "data": { - "label": "useCallback", - "style": { - "fontSize": 17, - "justifyContent": "flex-start", - "textAlign": "center" - }, - "legend": { - "id": "Z0WmUXWj-7draje3jE1WR", - "color": "#2d72d2", - "label": "Personal Recommendation (Opinion)", - "position": "left-center" - } - }, - "zIndex": 999, - "width": 231, - "height": 49, - "style": { - "width": 231, - "height": 49 - }, - "positionAbsolute": { - "x": -241.52532545570534, - "y": 438.44433023898546 - }, - "selectable": true, - "focusable": true, - "dragging": false, - "resizing": false - }, { "id": "FK59Zsm5ENA9g11XWCan_", "type": "subtopic", @@ -1663,7 +1625,7 @@ "type": "subtopic", "position": { "x": -249.95515386471317, - "y": 585.9443302389855 + "y": 574.0892656435051 }, "selected": false, "data": { @@ -1690,7 +1652,7 @@ "dragging": false, "positionAbsolute": { "x": -249.95515386471317, - "y": 585.9443302389855 + "y": 574.0892656435051 }, "selectable": true, "focusable": true @@ -4499,4 +4461,4 @@ "focusable": true } ] -} +} \ No newline at end of file