overreacted.io | Personal blog by Dan Abramov | Blog library
kandi X-RAY | overreacted.io Summary
kandi X-RAY | overreacted.io Summary
My personal blog. Forked from Gatsby blog starter. Syntax theme based on Sarah Drasner's Night Owl with small tweaks. To run locally, yarn, then yarn dev, then open
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- The SEO page .
- Check to see if a new path has changed
- Page panel rendering .
- Returns the pointer coordinates of a pointer .
- Format a date string for a given date
- Get a reading time .
- Replace component renderer with a props path
- Counts the number of slashes in the given url
- Escapes characters in a string so that it can be used as a string literal
overreacted.io Key Features
overreacted.io Examples and Code Snippets
Community Discussions
Trending Discussions on overreacted.io
QUESTION
so I have a code snippet here basically presenting the idea Dan mentioned which is to lift contents up in react to naturally improve performance and write cleaner code. In the InputField component, the Button always renders, this is not the behavior I want, it should skip rendering the Button component .so what it should do is skip the render because Button is inputfield's children props, and if children props does not change, react will skip the render.
similar concept example explained by Dan: "When the color changes, ColorPicker re-renders. But it still has the same children prop it got from the App last time, so React doesn’t visit that subtree"
so I am confused here, is that the problem with multiple children props, because InputField has value, onChange, children props, and one of them change, react decides to update others? I have an example here that kinda proves it's not the problem of multiple props.
Edit: follow up question, in the real world, top level components must have all kinds of useState, state update etc. would that mean the "lift contents up" (component composition) is not practical in the real world? just from the perspective of saving some rendering computing power. (we know it has other benefits like help with some prop drilling) Are there any real world implementations, code examples??
...ANSWER
Answered 2021-Nov-06 at 00:14Thanks @Jacob Smit in the comments. solved my problem. My Button component is still two low in the component structure, the 'lift contents up' way is to lift the content(component) up in your code so that when you setState() in the lower component, it won't affect that content(component).so the lower component keeps the props that are bound to pass down. For here, exactly as Jacob said my setState() is triggering re-render of Button and InputField, so Button will be rendered.
QUESTION
My "Home hero slide" is the last hardcoded part of my site. I want to make it dynamic and use the magic of gatsby-image-plugin.
the "hardcoded" codes:
HeroSlider.js
...ANSWER
Answered 2021-May-19 at 19:47Something this should work:
QUESTION
I'm making a React dashboard that calls an API every minute for updates. Following the many answers in SO, I have this at the moment that sort of works:
...ANSWER
Answered 2021-May-10 at 02:27You can resolve this issue in multiple way:
QUESTION
I am trying react-spring together with useInterval:
...ANSWER
Answered 2021-Mar-02 at 19:00If you want the animation to start again you need to set the reset flag:
QUESTION
I was reading an article called “A Complete Guide to useEffect” and tried to implement and an example from “Why useReducer Is the Cheat Mode of Hooks” section.
In that example there is a Counter component that defines state (just a number) with the help of useReducer hook. Reducer handles only one action — 'tick' on which it increments the state by the value of step prop. 'tick' action is dispatched every second in interval function that is set up in useEffect hook once.
Here is the code from that example with some minor modifications:
ANSWER
Answered 2020-Aug-28 at 11:23import React from "react";
import ReactDOM from "react-dom";
function App() {
const [step, setStep] = React.useState(0);
function Counter({ step }) {
const [count, dispatch] = React.useReducer(reducer, 0);
function reducer(state, action) {
if (action.type === "tick") {
console.log(`Reducer: state=${state} and step=${step}`);
return step === 0 ? state : state + step;
} else {
throw new Error(`Unknown action type: ${action.type}`);
}
}
React.useEffect(() => {
console.log("Create interval");
const id = setInterval(() => {
console.log("Dispatch");
dispatch({ type: "tick" });
}, 1000);
return () => {
console.log("Clear interval");
clearInterval(id);
};
}, [dispatch]);
return {count};
}
return (
<>
setStep(Number(e.target.value))}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
QUESTION
Graphql provides useQuery hook to fetch data. It will get called whenever the component re-renders.
...ANSWER
Answered 2020-Jun-22 at 15:40I think you misunderstood
what you want to be in dependencies array is [data, setStateOfValue] not [data, stateOfValue]. because you use setStateOfValue not stateOfValue inside useEffect
The proper one is:
QUESTION
I was going through this blog - useEffect complete guide topic and thought to use a - simple Typescript class and update states and see how useEffect behaves.
Is it ok to assign Typescript class to a useState variable ??
You can find the link to the example here in CodeSandbox.io
If JSX...For that matter, what if its just a ES6 class and not Typescript ?
...ANSWER
Answered 2020-May-22 at 12:34You are storing the instance of a class in state but you never update it.
You must note that even though you add items to the stateHelper class but the instance is not changing and hence the useEffect will not be executed again.
However in order to store instances that remain constant throughout the scope of your component instance its better to make use of useRef instead of useState
QUESTION
I am trying to write wrap up writing some tests for this component. I implemented a custom useInterval hook following this blog post from Dan Abramov (code). It basically makes a declarative setInterval function. However, I'm having a difficult time of testing it with Jest and Enzyme. The application was bootstrapped with create-react-app. I have installed the latest versions. When I click the start button, the elapsed time increases and displays on the page perfectly. In the parent component, I update state, which stores elapsed time. It passes the updated elapsed time timer props to Timer.js. Thus, it sows on the screen the correct elapsedTime. This works as expected in the browser. However, the timer doesn't run when running the tests.
ANSWER
Answered 2020-May-21 at 20:06The problem is with jest.useFakeTimers();, more specifically in a place you call it. You are mounting your component in beforeEach, before you fake timers. Because of that your useInterval hook is set up to use real setInterval, not the faked on from jest. The moment you call jest.useFakeTimers(); in a test is too late, as it wouldn't affect anything (you are not creating anything new related to timer).
If you move it before mount in beforeEach test would work.
QUESTION
I've been learning hooks and one concept still really bogles me.
When using useEffect, any variables declared inside becomes old after the next re-render. To get access to changing values inside useEffect, the most common answer, and one Dan Abramov uses himself, is to use the useRef hook instead.
However, imagine that there is a piece of information that you want to store in a global state using something like Redux, but you also want that information available in callback functions inside useEffect. In my particular case, when my component mounts I need to add event listeners to a web socket connected to the server that signals WebRTC connections. The value that the web socket listener callback functions needs will be updated throughout the application's usage.
How do I organize a state that is globally accessible, but can also be referenced the same way that a ref made by useRef can be accessed?
Here's an example of what I mean
...ANSWER
Answered 2020-Apr-27 at 09:13The idea about listeners is that they should be destroyed and recreated on closure value updates and cleaned up on unmount. You can add a users dependency to the useEffect and cleanup the listener
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install overreacted.io
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
