Theo's Typesafe Cult•3y ago

is this way of handling react states a bad idea?

This is a very long ass question, it might not be worth your time anyways. so sorry in advance. I'm a noob at react, I just know the basics and started making a relatively medium project. then as my component started having more children and grand children, I startup feeling the pain of managing all of those relationships. So I tried useContext but it feels like the syntax is too much, and I didn't feel like I need a state manager like Redux YET for my simple project, so I made this simple snippet, and my code looks so clean. and works like a charm. this will hold a reference to the state and the setState function, so you can use it from another component.

// each item in bridges has the states of a certain component
const Bridges = {};
// this gets called from the child component to change the state of the parent
const setState = (componentID, stateName, newState) =>  newState ?? Bridges[componentID][stateName].render(newState);
// this gets called from the child to read the state of the parent
const getState = (componentID, stateName) => Bridges[componentID][stateName].state;
// this gets called from the parent, the component you wanna share it's state with the child or re-render if the child received a delete event for example.
const initBridge = (componentID, states) => {
    if (!bridgesObj?.render) {
        bridgesObj.render = () => {
            console.error('render function is not set');
        };
    }
    // adds the parent states to the collection/store
    Bridges[componentID] = {...states};
};

export const Bridge = {initBridge, getState, setState};

// each item in bridges has the states of a certain component
const Bridges = {};
// this gets called from the child component to change the state of the parent
const setState = (componentID, stateName, newState) =>  newState ?? Bridges[componentID][stateName].render(newState);
// this gets called from the child to read the state of the parent
const getState = (componentID, stateName) => Bridges[componentID][stateName].state;
// this gets called from the parent, the component you wanna share it's state with the child or re-render if the child received a delete event for example.
const initBridge = (componentID, states) => {
    if (!bridgesObj?.render) {
        bridgesObj.render = () => {
            console.error('render function is not set');
        };
    }
    // adds the parent states to the collection/store
    Bridges[componentID] = {...states};
};

export const Bridge = {initBridge, getState, setState};

I noticed that this might be similar to what's inside of react, so I consider it as bloatware, but I think it's way easier to manage than using useContext.

53 Replies

venegoOP•3y ago

so here is how I use it to share my react components with their children (or any JS module). I initialise the bride object that holds a reference to the states and the setState of the target component

// after setting the state
  const states = {
    stateName1: {
      state: state1,
      render: (newState) => {newState && setState1(newState);},
    },
    stateName2: {
      state: state2,
      render: (newState) => {setState2(newState);},
    },
  };
  Bridge.initBridge('ID', states);

// after setting the state
  const states = {
    stateName1: {
      state: state1,
      render: (newState) => {newState && setState1(newState);},
    },
    stateName2: {
      state: state2,
      render: (newState) => {setState2(newState);},
    },
  };
  Bridge.initBridge('ID', states);

then I use it from another component or any where really, which is probably a bad idea but I 'm not sure about it. but mostly used in a child child component.

  // getting the state and changing it
  const targetStateInfo = ['ID', 'stateName1'];
  const targetState = deepClone(Bridge.getState(...targetStateInfo));
  targetState.someProp = 'changed';

  // triggering the setState1() in the target/parent component.
  Bridge.setState(...targetStateInfo)

  // getting the state and changing it
  const targetStateInfo = ['ID', 'stateName1'];
  const targetState = deepClone(Bridge.getState(...targetStateInfo));
  targetState.someProp = 'changed';

  // triggering the setState1() in the target/parent component.
  Bridge.setState(...targetStateInfo)

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

yes I though of it like this, that's why I decided to get someone's opinion before I use it all over my project.

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

you know, you have to import useState then the context in both the child and the parent, then you have to wrap the parent with the provide isn't react query for syncing http requests with the state?

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

oh, then what should I use? that is simple

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

ok...

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

well, I have this giant state( I probably need to split it) that has a lot of info about the component. I do use useState

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

would you like to check out the project? if you have time for this. ok, I should read about those

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

thanks, there is a lot of code that you won't need to check though. it's a todo app. here is the component that needs to be changed to show a form:(not the only one) https://bitbucket.org/segfaulty/todo-react-app/src/master/src/scripts/components/project/goal. and here is where I use the snippet in the question(the "bridger") to re-render the parent. it changes the state to show the form, which shows a form component. then the form component changes the item's state or its parent's state. https://bitbucket.org/segfaulty/todo-react-app/src/master/src/scripts/components/shared/form/formHandler.js here is the form component: (this exact function is where I use the "brider") https://bitbucket.org/segfaulty/todo-react-app/src/a1778984ac0778f807206d54f2d6e48c28b81257/src/scripts/components/shared/form/form.js#lines-155 sorry if this too long

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

but the imports number gets bigger!!

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

my bad!! the number of imports lines

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

oh k, thanks I'll consider that

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

apparently me hhh, I think I should check others code often oh I know, probably it's only fine when you work on personal projects? but a bad practice? or maybe I'll forget what it does after a while of not touching that code LOL

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

oh now remember my first motive to do that, I was changing the path of those imports a lot and it was painful to keep modifying that on each "consumer"

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

yh my noobie brain. so the form is just a form with fields(passed with each component that needs to use it). and that form displays a certain data(comes form the component that renders it) in the fields, then allows me to do some actions like edit(those fields) or create a new child to that component etc

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

yes, I didn't know about vite until like a week or something like that, I'll consider that in future yes but then the form has sub-forms, and I thought that would get messy very fast

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

also I have project passing data to goal and goal passing data to subgoal, so if I used the "bridger" here I think it's better to keep things consistent

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

ok, the form has to let you add tags to the component, and I thought It would be better to use a subform for each 'thing" like that so you can manage that thing in its own form you know... I think that's what I'm gonna do, this is making me wast a lot of time, and also making me confused about certain topics yh but you know, child inside child inside child....!! ok I'll do that I think I need to read about the other options you've mentioned which you prefer using? don't say props please, they make me hate my self

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

so I don't need it?

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

yh it makes sense in this case, but when the child component needs to modify the parent state, then the they overlap, you have to pass data which is an address to a function which modifies the state

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

and this is the part where it starts to look very ugly you know I know but it's very messy

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

it is a lot of code tbh, but you have one source of truth(or what ever they say)

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

oh okm it feels more comfortable to hear that but you start wondering which one(the children in between) made the change well tbh I'm kinda worrying about something(a huge complex project) that I won't probably reach, but you know...

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

I'm only 4 months in web dev and I feel like I need to make my project cover all use cases and future modification that probably won't happen

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

yes, it very clear. but you know the only problem I have with this, is my feelings about it hhh not that bad when you only have one child, but with two or three, you keep digging and digging I think I should get used to it. so I don't have to write a lot of code and maintain it and push my code away form the good practices yh I'll try to convince my brain with that hh there is no bot that does this? I found nada, someone should add that

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

well I don't want you to be bothered with how I manage the data I get from the server TBH 🤣 yeaaah... but it's gonna get better I guess, I hope so so react query is good for getting data from server and then using it in the components, or just fetching data directly to the state?

Unknown User•3y ago

Message Not Public

venegoOP•3y ago

@Koen I think I'm hugging you time, sorry for all the trouble and thank you for all of your time and effort I really appreciate what you've done. thanks yh thanks, it was a really good time talking to you, and thank you for your help

Gaming

Programming

is this way of handling react states a bad idea?