kentcdodds.com | My personal website | Frontend Framework library

as per my knowledge render is itself a function, that React is offering us, to show our JSX HTML code on the UI screen, thats only method we must define in our class React.Component thats subclass is render, remains methods are optional not mandatory like render, when we talk about lifecycle it includes everything all methods of the component,

I think you misunderstood a little how context works.

Basically (as react docs suggest):

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.

All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update.

On short when you create a provider with a value you are able to access that information from multiple consumers (that need to be children of that provider). So far so good.

Except: Home.tsx and TeaPage.tsx both initialize a different instance of the context (so each one has it's own provider). In order to fix this you should only create one provider in a component that is parent of both Home and TeaPage.

React context is not working as redux (where you have a global store that you can access from everywhere). It rather give you the option to create a context (with reusable data) for a big component (to consume in the children).

Also please notice the last quoted paragraph from the beginning: basically when the context changes this cause all consumers to re-render (which might sometimes lead to some performance issues) so use it wisely. Here is a short article about this.

As you can see, when a single input is updated, all the children are not re-rendered, they are first unmounted, then re-mounted. What a waste, all the input are already in the right state, only the sum needs to be updated. And imagine having hundreds of those inputs.

No, the logs you see from the useEffect don't represent a component mount/unmount. You can inspect the DOM and verify that only one input is updated even though all three components get rerendered.

If it was just a matter of re-rendering, I could look at memoization. But that wouldn't work because the callback is updated precisely because items change. No, my question is about the unmounting of all the children.

This is where you would use a functional state update to access the previous state and return the new state.

You would actually render (more or less) the whole app - or at least all involved components. That is pretty much the point of integration testing.

The only difference to end-to-end testing is that no other services are involved and you can also integration-test only parts of your app, but that does not mean that you have to integration-test only parts of your app.

useMemo() is actually working correctly in your code

You have:

const value = useMemo(() => wait(duration), [duration]);

useMemo() recalculate its value every time any of the values from its dependency changes, and you have [duration] inside your dependency array which change every time, you click the setDuration() button.

If you want to see useMemo() works, make the component re-render without changing its dependency.

Something like this: useMemo()

I managed to pass the test case with no act warnings.

Since you are calling an setTimeout which is an asynchronous function when the user clicks on the submitBtn button, therefore you have to wait for the promise to resolve.

In short, you're only going 1 level deep within the children. You'll have to recursively traverse through the children of children to assign the isInCard property.

React composes its children like a tree:

Here are several things you can do:

• The warning tells you that your app continues after your test completed, and thus other things happen during the run that you didn't check in your test and didn't wait for. So if you're happy with what you are testing, be warned and keep it like that.
• You can make your app a bit more testable by giving it options. For example you can have an optional prop indicating the amount of time to wait in timers, so that you can put it to 0 or a small number in your tests.
• You can mock timers: