React devtool & profiler

redux-form

emotion

react-redux

HTML DOM

redux-form / react-redux / react-router ...etc

Context Provider / Consumer

Almost emotion core

Change props dynamic & real-time update

Check each hooks / nested hooks state

Render tree with HOC

Suspend manually

Inspect in DOM

Show source

React Profiler

fiber commits

Hooks issue

fiber is linked list based

Although auto GC implemented by React team...

function MassFrequencyRenderedComponent({
  unexpendedProps,
}) {
  const largeSource = useMemo(() => {
    // map, extend structure....
  }, [unexpendedProps]);

  const summaryData = useMemo(() => {
    // aggregate....
  }, [largeSource]);
  
  return (
    <p>
      {summaryData}
    </p>
  );
}

If your component render in map (multiple instance), and it will be rendered many times, each.

Fiber need to compare memoizedProps and pendingProps many times

But, linked list structure keep reference (memorized) to determine render or not.

So, fiber will release memory after whole array rendered in recent production version. (based on JS GC policy)

Inclusion, DON'T useMemo with large scale structure in memory.

Aggregate data before component array map (reduce the Big O)

one more thing

class _HomePageWithState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '-$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.remove),
      ),
    );
  }
}

React Native

Dart (like Java)

JavaScript

Build for each platform bytecode

Language

UI Render

Build for each platform bytecode

Business Logic

Dart

Compiled Language

JavaScript

Script Language

redux / apollo client