react#Profiler JavaScript Examples

The following examples show how to use react#Profiler. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
ShowDetails = ({onRender}) => {
    const peopleSlow = usePeopleSlow(1, 2, 3, 4);
    const peopleFast = usePeopleFast(1, 2, 3, 4);

    return <Profiler id='profile1' onRender={onRender || (() => {})}>
        <div>
            People slow length: {peopleSlow.length};
            People fast length: {peopleFast.length};
        </div>
    </Profiler>
}
Example #2
Source File: Day.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
Day = ({year, month, day, onRender}) => {
    let shouldRender = year && month && day;
    return <div className='Day'>
        {
            <Profiler id={`Day-${year}-${month}-${day}`} onRender={onRender || (() => {})}>
                {
                    shouldRender ?
                        <>
                            <MonthDay day={day}/>
                            {/*<Month month={month}/>*/}
                            {/*<Year year={year}/>*/}
                        </>
                        : null
                }
            </Profiler>
        }
    </div>
}
Example #3
Source File: MonthCalendar.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
MonthCalendar = ({year, month, onRender}) => {
    const start = startOf(year, month);
    const days = [];

    for (let i = 1; i < start.getDay(); i++) {
        days.push(<Day key={`daySpace-${year}-${month}-${i}`}/>)
    }
    let dayLimit = daysInMonth(year, month);
    for (let day = 0; day < dayLimit; day++) {
        days.push(
            <Day
                day={day}
                month={month}
                year={year}
                key={`day-${day}-${month}-${year}`}
                onRender={onRender}
            />
        );
    }

    return <div className='MonthCalendar'>
        <Profiler id='MonthCalendar' onRender={onRender || (() => {
        })}>
            <h2>{getMonthName(month)}</h2>
            {days}
        </Profiler>
    </div>
}
Example #4
Source File: YearCalendar.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
YearCalendar = ({year, onRender}) => {
    const cals = [];

    for (let i = 1; i <= 12; i++) {
        cals.push(<MonthCalendar year={year} month={i} key={`calendar-${year}-${i}`} onRender={onRender}/>)
    }
    return <Profiler id='YearCalendar' onRender={onRender || (() => {})}>
        {cals}
    </Profiler>;
}
Example #5
Source File: App.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
function App({onRender}) {
    const [year, setYear] = useState(2023);

    return (
        <div className="App">
            <h1>Year: {year}</h1>
            <Profiler id='app' onRender={onRender || (() => {})}>
                <button
                    onClick={() => setYear(y => y - 1)}
                >Previous</button>
                <button
                    onClick={() => setYear(y => y + 1)}
                >Next</button>
                <YearCalendar year={year} onRender={onRender}/>
            </Profiler>
        </div>
    );
}
Example #6
Source File: Calendar.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
render() {
        let shouldRender = this.props.day;
        return <div className='Day'>
            {
                <Profiler id={`Day-${this.props.day}`} onRender={this.props.onRender || (() => {})}>
                    {
                        shouldRender ?
                            <>
                                <MonthDay day={this.props.day}/>
                            </>
                            : null
                    }
                </Profiler>
            }
        </div>
    }
Example #7
Source File: Calendar.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
Day1 = ({year, month, day, onRender}) => {
    let shouldRender = year && month && day;
    // let shouldRender = day;
    return <div className='Day'>
        {
            <Profiler id={`Day-${year}-${month}-${day}`} onRender={onRender || (() => {})}>
                {
                    shouldRender ?
                        <>
                            <MonthDay day={day}/>
                            <Month month={month}/>
                            <Year year={year}/>
                        </>
                        : null
                }
            </Profiler>
        }
    </div>
}
Example #8
Source File: Calendar.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
Calendar = ({year, month, onRender}) => {
    const start = startOf(year, month);
    const days = [];

    for (let i = 0; i < start.getDay(); i++) {
        days.push(<Day key={`daySpace-${year}-${month}-${i}`}/>)
    }
    let dayLimit = daysInMonth(year, month);
    for (let day = 0; day < dayLimit; day++) {
        // days.push(<Day year={year} month={month} day={day} key={`day-${year}-${month}-${day}`} onRender={onRender}/>)
        days.push(<Day day={day} key={`day-${day}`} onRender={onRender}/>)
    }

    return <div className='Calendar'>
        <Profiler id='Calendar' onRender={onRender || (() => {
        })}>
            <h2>{getMonthName(month)}</h2>
            {days}
        </Profiler>
    </div>
}
Example #9
Source File: YearCalendar.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
YearCalendar = ({year, onRender}) => {
    const cals = [];

    for (let i = 1; i <= 12; i++) {
        cals.push(<Calendar year={year} month={i} key={`calendar-${year}-${i}`} onRender={onRender}/>)
    }
    return <Profiler id='YearCalendar' onRender={onRender || (() => {})}>
        <h1>Year: {year}</h1>
        {cals}
    </Profiler>;
}
Example #10
Source File: index.js    From ReactSourceCodeAnalyze with MIT License 6 votes vote down vote up 
export default function ElementTypes() {
  return (
    <Profiler id="test" onRender={() => {}}>
      <Fragment>
        <Context.Provider value={'def'}>
          <Context.Consumer>{value => null}</Context.Consumer>
        </Context.Provider>
        <StrictMode>
          <Suspense fallback={<div>Loading...</div>}>
            <ClassComponent />
            <FunctionComponent />
            <MemoFunctionComponent />
            <ForwardRefComponent />
            <LazyComponent />
          </Suspense>
        </StrictMode>
      </Fragment>
    </Profiler>
  );
}
Example #11
Source File: App.js    From ReactCookbook-source with MIT License 5 votes vote down vote up 
// let renders = [];
// let tracker = (
//     id,
//     phase,
//     actualDuration,
//     baseDuration,
//     startTime,
//     commitTime,
//     interactions
// ) => {
//     renders.push({
//         id,
//         phase,
//         actualDuration,
//         baseDuration,
//         startTime,
//         commitTime,
//         interactions: JSON.stringify(Array.from(interactions))
//     })
// };

function App({onRender}) {
    const [year, setYear] = useState(2023);

    return (
        <div className="App">
            <h1>Year: {year}</h1>
            <Profiler id='app' onRender={onRender || (() => {})}>
            {/*<Profiler id='app' onRender={tracker}>*/}
                <button
                    onClick={() => {
                        trace("previous button click", performance.now(), () => {
                            setYear(y => y - 1);
                        });
                    }}
                >Previous</button>
                <button
                    onClick={() => setYear(y => y + 1)}
                >Next</button>
                <br/>
                <YearCalendar year={year} onRender={onRender}/>
            </Profiler>
            {/*<button onClick={() => console.table(renders)}>Stats</button>*/}
        </div>
    );
}