Created
January 12, 2023 15:57
-
-
Save GuilhemBarboux/4330e8c1641d657ea294bbf7bf8cd680 to your computer and use it in GitHub Desktop.
Test for render order
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { FunctionComponent, useEffect, useLayoutEffect } from 'react'; | |
| interface OwnChildProps {} | |
| type ChildProps = OwnChildProps; | |
| const Child: FunctionComponent<ChildProps> = props => { | |
| useEffect(() => { | |
| console.log('Child useEffect'); | |
| return () => { | |
| console.log('Child release useEffect'); | |
| }; | |
| }, []); | |
| useLayoutEffect(() => { | |
| console.log('Child useLayoutEffect'); | |
| return () => { | |
| console.log('Child release useLayoutEffect'); | |
| }; | |
| }, []); | |
| console.log('Child render function'); | |
| return; | |
| }; | |
| interface OwnParentProps {} | |
| type ParentProps = OwnParentProps; | |
| const Parent: FunctionComponent<ParentProps> = props => { | |
| const [active, setActive] = useState(false); | |
| useEffect(() => { | |
| console.log('Parent useEffect'); | |
| setActive(true); | |
| return () => { | |
| console.log('Parent release useEffect'); | |
| }; | |
| }, [active, setActive]); | |
| useLayoutEffect(() => { | |
| console.log('Parent useLayoutEffect'); | |
| return () => { | |
| console.log('Parent release useLayoutEffect'); | |
| }; | |
| }, []); | |
| console.log('Parent render function'); | |
| return <Child />; | |
| }; | |
| export default Parent; |
Render function parent to child
Parent render function
Child render function
Layout effects child to parent
Child useLayoutEffect
Parent useLayoutEffect
Effects child to parent
Child useEffect
Parent useEffect
SetActive => re-render
Parent render function
Child render function
Params of useEffect change : release the effect and re-execute
Parent release useEffect
Parent useEffect
Re-render on parent : only state of parent change, no change for the child
Parent render function
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Quel est l'ordre du rendu des consoles.log ?