[Feature]: Figure out how to teach people not to use global state by creating a lot of state at the top components

Feature Category

Performance Enhancement

Problem Statement

People love using global state and tend to declare variables in the module scope and then initialize them with tracked values in the top level components. Or they create state in the top level components and then use that through their componen tree.

Why this is bad. Because if this state is updated it will cause the whole component tree to be marked as dirty and force Ripple to check what changed and rerender as necessary. This could have a very negative impact on performance.

How do we teach people not to do this and provide tools that help to avoid this situation.

Proposed Solution

We talked about creating a component library, e.g. Link

Maybe we can track the whole reactive block tree to see if too much reactivity is created at the top and used below and generate warnings or it's just an analysis tool that points out issues.

What else?

Alternatives Considered

No response

Examples & References

No response

Checklist

• I've searched for existing feature requests
• I'm willing to help implement this feature