The React useMemo Hook returns a memoized value. The useMemo Hook can be used to keep expensive, resource intensive functions from needlessly running. Think of memoization as caching a value so that it does not need to be recalculated. The useMemo Hook only runs when one of its dependencies update. This can improve performance. Example: import Read more…
Problem Description: const [data, setData] = useState([]); data.push(1); setData(data); When I modify the origin array data and set it back, the page won’t refresh. Analysis: In vue and react, if you update a mutable object, it will cause the view to be updated. However, vue and react use shallow listening Read more…
Last time, we have successfully displayed a Markdown article on the website and automatically generated a catalogue. Now, we wanted to generate a more practical fixed sidebar navigation. Solution 1: We can use ‘markdown-navbar’. However, this plugin has requirements for the format of markdown files, if the format is not Read more…
export const NumberContext = React.createContext(); function App() { const [foo, changeFoo] = useState('foo') return ( <NumberContext.Provider value={{ foo, changeFoo }}> <TheButton /> <Display /> </NumberContext.Provider> ); } function TheButton() { const { changeFoo } = useContext(NumberContext) return ( <button onClick={() => changeFoo('bar')}>Click me</button> ); } function Display() { const context Read more…
In my project, I jumped to another page before the web request was returned and found that the console reported an error: Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all Read more…
First of all, setState has two ways of passing parameters: Pass the new value directly: setState(options) const [state, setState] = useState(0); setState(state + 1); Pass in the callback function: setState(callBack) const [state, setState] = useState(0); setState((prevState) => prevState + 1); // prevState is the state value before the change, // Read more…
Last time, I deployed a React.js project on a server. But I found the router doesn’t work. I click the menu to other child pages. It always returns a 404 page. I did some search and found the reason. When I try to get a page by url, nginx would Read more…
1. history principle The visited addresses are stored on a stack (LIFO-last in first out) 2. history.go() /home ==> /home/qa ===> /home/video history.go(-1) // return to previous page, history.go(1) // go forward one page 3. history.replace() & history.push() Location Replace: The link of the page is set to the new one, Read more…
Last time, we have introduced how to display a Markdown document in React.(http://52.65.48.177/index.php/2023/03/13/rendering-markdown-in-react/) Now, let’s move forward to support ToC(Table of Content), Mathematical Formula and Footnote. 1. ToC (Table of Content) To support ToC and in-page jump, we need two plugins: remarkToc and rehypeSlug. RehypeSlug is a plugin to add Read more…
import React, {useEffect} from "react"; import { useFormik } from "formik"; import { Box, Button, FormControl, FormErrorMessage, FormLabel, Heading, Input, Select, Textarea, VStack, } from "@chakra-ui/react"; import * as Yup from 'yup'; import FullScreenSection from "./FullScreenSection"; import useSubmit from "../hooks/useSubmit"; import {useAlertContext} from "../context/alertContext"; const LandingSection = () => { Read more…