CODEWITHSUNDEEP
react-nativereact-hooks
Brantley English
Brantley English

Reputation: 388

Re-render React useState without updating the state

I need to re-render this state manually.

const [person] = React.useState(new Person());

I have methods inside the Person class to update it (e.g. person.setName('Tom')). When I update person using a method from itself, it does not trigger a re-render on the person state.

const carouselData = React.useMemo(() => {
  // Doesn't re-render when the fields on the person class update
}, [person]);

Is there a way to force this state to re-render without using a setState function? Ideally, is there a way to call that re-render from inside the Person class itself?

Or is this totally misusing the useState functionality? Would there be a better React hook to connect this to?

Thanks!

Upvotes: 1

Views: 927

Answers (2)

Chance Smith
Chance Smith

Reputation: 1255

Person could be a prop or in context instead. First create your instance outside of your component.

const person = new Person([]);

Then pass person as a prop.

function App({person}) {
  const [personName, setPersonName] = useState(person.personName);

  function handleNameChange(txt) {
    person.addTodo(txt);
    setPersonName(person.personName);
  }

  function handleSubmit(txt) {
    handleNameChange(txt);
  }
  
  return (...)
}

Upvotes: 1

Jose Greinch
Jose Greinch

Reputation: 458

you are indeed miss using it, react relies heavy on functional programming. you should be doing something like:

const [person, setPerson] = useState(new Person());
...
setPerson(setPersonName(person, 'Tom'));

that's just a silly example but you get the gist. react will only re-render if state is changed, it won't monitor if the state object is mutating or anything like angularjs used to do

Upvotes: 0

Related Questions