Giter Site home page Giter Site logo

useSetState doesn't work about react-use HOT 12 CLOSED

streamich avatar streamich commented on April 16, 2024
useSetState doesn't work

from react-use.

Comments (12)

likun7981 avatar likun7981 commented on April 16, 2024 1

@ilovedesert001 Every time, the state is a new point(object)

https://codesandbox.io/s/zl1wjo69qx

from react-use.

ilovedesert001 avatar ilovedesert001 commented on April 16, 2024

and this works fine

const useSetState = <T extends object> (initialState: T = {} as any): [T, (patch: Function | Partial<T>) => void] => {
  const [state, set] = useState(initialState)
  const setState = (patch) => {
    if (patch instanceof Function) {
      set((prevState) => {
        return Object.assign({}, state, patch(prevState))
      })
    } else {
      const newState = Object.assign({}, state, patch)
      set(newState)
    }
  }
  return [state, setState]
}

from react-use.

streamich avatar streamich commented on April 16, 2024

Thanks for reporting this! Should be fixed now.

from react-use.

ilovedesert001 avatar ilovedesert001 commented on April 16, 2024

it seems still some bugs ...

maybe the better way

typescript

export const useSetState = <T extends object> (initialState: T = {} as any): [T, (patch: Function | Partial<T>) => void] => {
  const [tick,setTick] = useState(true)

  const [state, set] = useState<T>(initialState);
  const setState = patch => {
    if (patch instanceof Function) set(prevState => Object.assign(prevState, patch(prevState)));
    else set(Object.assign(state, patch));
    setTick(!tick)
  };
  return [state, setState];
}

from react-use.

ilovedesert001 avatar ilovedesert001 commented on April 16, 2024

and this works fine

const useSetState = <T extends object> (initialState: T = {} as any): [T, (patch: Function | Partial<T>) => void] => {
  const [state, set] = useState(initialState)
  const setState = (patch) => {
    if (patch instanceof Function) {
      set((prevState) => {
        return Object.assign({}, state, patch(prevState))
      })
    } else {
      const newState = Object.assign({}, state, patch)
      set(newState)
    }
  }
  return [state, setState]
}

This will cause problems when Passing state (Object) to child Components

from react-use.

streamich avatar streamich commented on April 16, 2024

This will cause problems when Passing state (Object) to child Components

@ilovedesert001 Can you give an example? Is it because child components mutate the state object?

from react-use.

ilovedesert001 avatar ilovedesert001 commented on April 16, 2024

check out these

what i expect

this may cause problems

from react-use.

likun7981 avatar likun7981 commented on April 16, 2024

@ilovedesert001 Why do you use useRef, The returned object will persist for the full lifetime of the component. So a subsequent change is invalid. demo1 is expected, because you assign the patch to state, not create a new object. In fact the state point still has not changed.
image.

So in fact there is no need to use the ref
work fine demo

from react-use.

ilovedesert001 avatar ilovedesert001 commented on April 16, 2024

@likun7981
In my case , I don't want to change state point (Or state Object), just need change state property to cause rerender.

@streamich
Q:Is useSetState designed to change the state point (replaced by new state object), or persist state object for the full lifetime of the component ?

from react-use.

streamich avatar streamich commented on April 16, 2024

@likun7981 I think this should be ti.

from react-use.

likun7981 avatar likun7981 commented on April 16, 2024

@likun7981 I think this should be ti.

These two problems is no relationship

from react-use.

streamich avatar streamich commented on April 16, 2024

@likun7981 OK, sry.

from react-use.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.