Some proble with React

When use react with out any flux framework, I found that when create some components to build one page, I must make too many state in each components and can't share the state between two compnents.

for example my metting room app that is a meeting app like zoom implement by webrtc:

question 1:

when I try to make sure the layout full in the screen, I must listen the window resize event to change every conponent's height and width. So, how many conponents I wrote how many resize event function I must implement. I can't write just onece in the root conpnent and share the window height and width data to children.

import React from 'react';
import {List} from 'antd';
import { UserListItem } from './UserListItem';

export class UserList extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            height : window.innerHeight - 40
        }
    }

    componentDidMount(){
        window.onresize = ()=>{
            this.setState({
                height:  window.innerHeight - 40
            })
        }
    }

    render(){
        return(
            <List 
                className = 'user-list'
                header =  'All Users'
                style = {{height: this.state.height + 'px'}}
                dataSource = {this.props.users}
                renderItem = { item => (
                    <List.Item>
                        <UserListItem user={item}/>
                    </List.Item>
                )}>
            </List>
        )
    }

}

question 2:

I have a user list for one page, when the user list changed I can't notify change and trigger the change in other conpnent.

so, I should use one store.js to manage the state, should I use redux? I'm new for react...

Comments

[Peter Vivo]

Only one resize event, and one dimension is enable.

export function Layout({...props}) {
  const areaSize = useResizeHook(); // you write this hook once.  

  return (
     <main>
       <Header areaSize={areaSize} {...props} />
       <Content areaSize={areaSize} {...props} />
       <Footer areaSize={areaSize} {...props} />
     </main>
  );
}

Just pass this size in props to size dependent component and that is tigger in each component below.

In my view do not need to use redux for state management, because simple useReducer is fare enough to handle states and actions.

I wrote few helper function for that as npm package: github.com/Pengeszikra/react-troll
which is help to organize your actions. But do not need to use that, maybe take look.

2: Same easy solution (that I like react) : In outer component declare state, actions with useReducer, and pass down any amount component which is use, and when any of modify state, each tiggered.

[Mingzhe An]

Thanks. It's helpful.