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…
The @media screen rules are used to create responsive design in CSS so that web pages render the best appearance and layout on different devices. You can define different CSS rules to apply different styles within a specific range of screen sizes.Here is a simple example: /* default style */ 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…
<div class="box"> <img src="upimg/comm.png"/> </div> <div class="box"> <img src="upimg/comm1.png"/> </div> <div class="box"> <img src="upimg/comm2.png"/> </div> .box{ width: 100%; margin: 20px auto; background: skyblue; position: relative; padding-bottom: 56%; // change this overflow: hidden; } .box>img{ width: 100%; position: absolute; top: 0; left: 0; } Note: padding-bottom attribute: when the value is 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…
The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will Read more…
When Prettier is used in conjunction with ESLint, ESlint detects the crlf and cr differences between the code runtime and the project creator to the point where all ends of lines errors are reported. Reason For historical reasons, windows and linux have different line feeds for text files. Windows uses Read more…