DEV Community

Mingzhe An
Mingzhe An

Posted on

Some proble with React

#react #reactstate

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>
        )
    }

}
Enter fullscreen mode Exit fullscreen mode

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...

Top comments (2)

Collapse
 
pengeszikra profile image
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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
mazingan profile image
Mingzhe An •

Thanks. It's helpful.

Read next

brijesh_dobariya profile image

What's New in React 19?

Brijesh Dobariya -

vidvatek profile image

How to Create Moment JS Calendar in React Native

vidvatek -

18xdeveloper profile image

News admin dashboard

Sheikh Abdur Rohit -

thecodingcutie profile image

Creating Animated Diagrams for LinkedIn

Nayan Kaslikar -