Why does parent's componentDidMount gets called first, then child's?

giorgi-m
创建于
2019-09-26 06:36:13

I thought it was always the case, that first, child's componentDidMount would be called, and then, parent's.

However, in this example: https://codesandbox.io/s/tender-jones-gpkz3

First parent's componentDidMount is called, then Child's (check the logs).

This happens after I use this in child:

export default compose(
  withStyles(styles),
  withWidth()
)(Child);

Does anyone have explanation why this happens?

7条回答
bvaughn
回复于
2019-09-26 15:38:44
#1

This has something to do with HOCs you're using recompose to wrap around Child. Remove them, and you'll see logs in the expected order.

Screen Shot 2019-09-26 at 8 38 04 AM

giorgi-m
回复于
2019-09-26 16:17:08
#2

@bvaughn it seems it is withWidth that does it, it is from react Material UI library, maybe I should open issue there then...
I thought because of how react works, it should have never happened that childs CDM is called after parent, but maybe that HOC delays rendering or smth. like that..

bvaughn
回复于
2019-09-26 17:18:42
#3

but maybe that HOC delays rendering

That would be my guess. Not familiar with that project though.

oliviertassinari
回复于
2019-09-26 17:39:58
#4

@giorgi-m we plan to deprecate withWidth for https://material-ui.com/components/use-media-query/ (and withMediaQuery).

withWidth uses a two passes rendering strategy to handle server-side hydration. You can find an option to disable it in the API section. It will likely solve your problem.

However, you likely don't want to rely on the did mount call order.

giorgi-m
回复于
2019-09-26 17:53:28
#5

@oliviertassinari

You can find an option to disable it in the API section. It will likely solve your problem.

if you drop link, I'd appreciate. Couldn't find.

if you replace it with useMediaQuery hook in the future, seems some features of material can't be used in class? would be nice if it stayed class compatible too ....

oliviertassinari
回复于
2019-09-26 18:07:36
#6

See the no ssr option in https://material-ui.com/customization/breakpoints/.

We had this class support feedback at a couple of occasion in the past. We will keep supporting class components as long as React does.

bvaughn
回复于
2019-09-26 18:23:16
#7

Thanks for the helpful added context, @oliviertassinari!

当前位于第1页,总计7 条回复

推荐相似问题

State not updating in realtime

I am updating state in setState() and the page is rendered correctly, but "React Developer Tools" is showing previous st
讨论数 8
react
创建时间:2019-09-25 12:32:56

Problem with updating component state in the "Components" tab of React Developer Tools - Chrome extension

Hello everyone, I have a problem with Chrome extension - React Developer Tools, if I change component's state it's not c
讨论数 2
react
创建时间:2019-09-25 12:13:45

React dev tools doesn't appear in chrome (Ubuntu 18.04.3)

Do you want to request a feature or report a bug? Report a bug What is the current behavior? React dev tools don't appea
讨论数 4
react
创建时间:2019-09-25 10:40:39

Hook params inside functions are not updated (only for event listeners)

Do you want to request a feature or report a bug? Bug(possibly) What is the current behavior? Whenever a function is cal
讨论数 3
react
创建时间:2019-09-25 09:03:18

Error: Invalid operand to 'in': Object expected ==> IE10

Getting "Invalid operand to 'in': Object expected" error, in react application, I haven't used 'in' operator throughout
讨论数 5
react
创建时间:2019-09-25 08:40:21

Wrong DOM calculations between renders in Firefox

Do you want to request a feature or report a bug? bug What is the current behavior? Using useCallback through a custom h
讨论数 6
react
创建时间:2019-09-25 07:26:47

unable to toggle true/false in state variables in new version of react dev tools

Do you want to request a feature or report a bug? What is the current behavior? If the current behavior is a bug, please
讨论数 2
react
创建时间:2019-09-25 05:57:55

[eslint-plugin-react-hooks] allow configuring custom hooks as "static"

Do you want to request a feature or report a bug? Feature/enhancement What is the current behavior? Currently the eslint
讨论数 12
react
创建时间:2019-09-24 11:45:13