Create @pc.component

[picklelo]

Currently the entire page is compiled into a single giant component. For larger apps, this leads to poor performance, as each state updates re-renders the entire page.

This is most apparent on our intro docs page. When you click the counter button, there's a noticeable delay. However the same app at https://counter.pynecone.app is much much faster. After doing some profiling, we realized this isn't due to anything with the state size or network latency, but rather the React re-rendering. After removing all the fancy UI on the docs page, we achieved the same performance as the counter app.

We should create a decorator @pc.component so people can define components that will be compiled out to React functions. This should improve performance, as we can mark these components as pure or use React memo.

The interface should be something like:

@pc.component
def my_component():
  return pc.box(...)

We should also see if we can do something about https://github.com/pynecone-io/pynecone/issues/147 as part of this. Perhaps the decorator can take in some state arguments that the component uses, and it can compile out to a separate useState in the JS code. This could be a way to have local component state that is independent of the global app state.