How to request a redraw on prop/state update?

• I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

Give a component a prop which is created from a singleton object.

I.e. MyComponent.create(c).athing(MyData.instance()).build()

Which is then used to display some text,

    @OnCreateLayout
    static ComponentLayout onCreateLayout(
            ComponentContext c,
            @Prop MyData athing) {
        return Column.create(c)
                .child(create(c)
                        .text(athing.something)
               ...

And then in an onClick method update the singleton i.e:

MyData.instance().something = "NEW THING!";

Expected Behavior

The component should update the text with NEW THING.

How can I update a prop - or whatever - which is passed to a component and have the component update? Or simple request a redraw of the component?

[Edit] Reading about it some more, the whole component must be recreated. This is fine. But in hierarchical components - say parent component and then a edit text component within it - how can I tell the parent from within the child to recreate itself? An event?

[mihaelao]

Hi @newfivefour , thanks for bringing this up. I’ll work on adding a concrete example on how to update the components in the tutorial.

In the meantime, regarding your question around these instructions: “If the props values must be updated, the parent has to create a new Component and pass down new values for the props”. Whenever you want to change the props for one of your components in your hierarchy, you need to create a new component using the new value of the prop and pass it as the new root for your LithoView using the setComponent method. The data flow model in Litho is top-down, meaning that whenever something has to change in a component, it’s the parent that is responsible for passing down that data to the children, and the only way to re-render the hierarchy is by setting a new root for the tree.

If a component needs to keep track of an internal value that the parent doesn’t need to know about (for example the selected/unselected state of a toggle button), then you can use state updates to manage this value locally to the component. Each state update would trigger a new re-layout of the component tree.

Hope that helps, let me know if this is still unclear.

[samueljseay]

@newfivefour Did you ever figure this stuff out in a nice way? the state stuff is clear enough but doing a flux-like model update is not clear to me.