React

Some time we have to show the JSON data to the client, but in React js we can not directly rendered the json data if we do so; we will get the error something like this. Objects are not valid as a React child Let’s see how to tackle this. //App.js // json that we want to show. const json = [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut" }, { "userId": 1, "id": 4, "title": "eum et est occaecati", "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit" } ]; export default function App() { return ( <div> <pre> <code>{JSON....

The useMemo useMemo hook returns a memoized value. It only runs when one of its dependencies update. syntax const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); The useMemo and useCallback Hooks work on the same mechanism. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function. You can learn more about useCallback in the useCallback blog . Example Without useMemo import { useState } from "react"; import "....

The useCallback To understand the useCallback hook first we will have to learn about memoisation what does it really mean? Memoisation In computing, memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Now let’s go back to the useCallback hook. useCallback hook is nothing but it returns memoized callback function....

Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. The useState hook is one of them. Let’s go through this hook ❤️. The useState If you are following the functional-based component approach then This is the hook that you must be using a lot. The useState hook has been introduced to handle the state inside the functional component....

The Problem In Reactjssometimes we have to display the string in multiline but it does not work in reactjs. const [text, setText] = useState(`Some text \n next line`); output The Solution For solving this problem we can use either React Fragment tag or any valid JSX tag. const [text, setText] = useState( <> Some text <br /> next line </> ); output If you find it helpfull please share with your network ✅....