Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating the state of a cell causes all cells in cellgroup to re render #469

Open
HavardNot opened this issue Mar 12, 2024 · 3 comments
Open
Assignees
Labels
bug Something isn't working

Comments

@HavardNot
Copy link
Contributor

HavardNot commented Mar 12, 2024

Package / App

MAD Components

Version

0.13.0

What happened?

Expected behaviour: When the state of a cell is updated, only the current cell should be re-rendered
Actual behaviour: All cells in the cell group are re-rendered.

When working with large cell groups this causes slowness in the app. This can probably be fixed by using memoization

Other info

No response

Relevant log output

No response

@HavardNot HavardNot added the bug Something isn't working label Mar 12, 2024
@HaakonSvane HaakonSvane self-assigned this Mar 26, 2024
@HaakonSvane
Copy link
Collaborator

@HavardNot I tried recreating this by creating a simple test screen:

const StateCell = () => {
    const renderCounter = useRef(0);
    renderCounter.current += 1;
    const [myState, setMyState] = useState<number>(0);

    return (
        <Cell style={{}}>
            <Typography>Rendered {renderCounter.current} times</Typography>
            <Button title="Cause rerender" onPress={() => setMyState(state => state + 1)} />
        </Cell>
    );
};


export const TestScreen = () => {
    const style = useStyles(themeStyles);
    return (
        <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            contentContainerStyle={style.contentContainer}
        >
            <Cell.Group>
                <StateCell />
                <StateCell />
                <StateCell />
            </Cell.Group>
        </ScrollView>
    );
};

const themeStyles = EDSStyleSheet.create(theme => ({
    contentContainer: {
        paddingVertical: theme.spacing.container.paddingVertical,
    },
}));

And got the following results:

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.DEV.-.2024-03-26.at.08.17.19.mp4

It seems that state changes inside single cells do not cause others to rerender. Was this what you meant, or was the issue you described triggered by something else?

@HavardNot
Copy link
Contributor Author

@HaakonSvane I was having this issue using it for Country Information, but I was struggling to reproduce the issue in Chronicles. @tormodAase did you take a look at this, and did you manage to reproduce the problem?

@tormodAase
Copy link
Contributor

Nope, I can try to reproduce the issue this week

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
3 participants