(JS/React) Where to put all my logic in React? = How should I structure my code?-CodePudding

I got more of a general question today. I am a self-taught programmer and do it on a hobby-base for small private projects. What is hard to learn from tutorials and documentation is how to properly structure code.

In case of React.js I often find myself with hundreds of lines of code within a single page or component.

Given the following example: There is a page with a form, which contains different, changeable values (dates, booleans, numbers, strings = all different type of data format). These are "saved" within a single React.useState as object named "values" with attributes like "date", "startTime", "specialDay", "persons" etc.. When one of these is changed, others might change as well, which require some logic (e.g. if date changed, get all other values updated from database). Or sometimes, I want to change a single nested attribute (e.g. values.person[1].points) which leads in dozens of lines of code within a single React.useEffect()-call (which I need multiple of).

I thought of exporting these things in an extra file but that did not work at all because of the nature of hooks and the tight relationship to the components. From my understanding, this is not "business-logic" since it's mainly "how to set state"-logic.

I don't even know, if my problem is (the way I described it) understandable by anyone but my self.

Maybe in short: If I need a lot of logic, computing and conditional/dynamic state-changing in React pages and components, what might be the best way to structure this?

CodePudding user response：

If your question is about how to manage complex component state you should consider using useReducer instead of useState.

The reducer function takes the current state and an "action" object with information about what happened as inputs, and returns the new state.

function reducer( state, action ) {
  const newState = ... // figure out the new state
  return newState;
}

Because the reducer function is a regular garden-variety javascript function, you can move it out to a separate file or break it into more specialized utilities, free from the rules of hooks.

Your component can just dispatch information and let the reducer figure out the state update.

import { useReducer } from 'react';
import myReducerFunction from './my-complex-state-reducer';

function MyComponent () {
  const [state, dispatch] = useReducer(myReducerFunction, initialState);
  
  return (
     <button onClick={() => dispatch({ clicked: true, foo: 1234 })}>Do stuff</button>
  );
}

CodePudding user response：

It might be easier if you provide a code example with your best effort of refactoring it to how you want it - then people here can help you refactor it further.

Here you can upload some code and share with us - https://codesandbox.io/