Skip to content

Instantly share code, notes, and snippets.

@GuilhemBarboux

GuilhemBarboux/ConsoleLog.tsx

Created January 12, 2023 15:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GuilhemBarboux/4330e8c1641d657ea294bbf7bf8cd680 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GuilhemBarboux/4330e8c1641d657ea294bbf7bf8cd680 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. GuilhemBarboux created this gist Jan 12, 2023.
    59 changes: 59 additions & 0 deletions ConsoleLog.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    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;