Why is React not rendering my component state correctly?

by

React only knows to re-render when you tell it something changed, by using the facilities it provides for state management:

class Foo extends React.Component {
    // In class components state must be an object
    state = {
        x: 3,
    };
    componentDidMount () {
        fetch(apiURL).then(() => {
            // Note that we change state with the setState method.
            this.setState({ x: 5 });               
        });
    }

    render () {
        return <div>{this.state.x}</div>;
    }
}

additionally function components should be pure (no side-effects) so to update them React gives us hooks:

const Foo = () => {
    const [x, setX] = useState(3);
    useEffect(() => {
        fetch(apiURL).then(() => {
            // We use the setter returned from useState.
            setX(5);               
        });
    }, []);

    return <div>{x}</div>;
}

So you can’t just assign to a variable and expect React to know: you have to use it’s update functions so it knows it needs to re-render that data to the page.

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Nested routes with react router v4 / v5
  3. ReactJS call parent method
  4. Await is a reserved word error inside async function
  5. React react-router-dom pass props to component
  6. How to get the value of an input field using ReactJS?
  7. What’s the difference between `useRef` and `createRef`?
  8. ReactJS: “Uncaught SyntaxError: Unexpected token
  9. Deprecation warning using this.refs
  10. How can I render HTML from another file in a React component?
  11. How to hide navbar in login page in react router
  12. Accessing event.target inside callback in react
  13. How to allow CORS in react.js?
  14. How To Solve The React Hook Closure Issue?
  15. body data not sent in axios request
  16. redux fetch body is not use with no cors mode
  17. css position absolute making the textbox go down
  18. How is this type annotation working in React code without TypeScript?
  19. React-router v4 – cannot GET *url*
  20. Get image preview before uploading in React
  21. How to programmatically clear/reset React-Select?
  22. Fetch image from API
  23. How to restrict access to routes in react-router?
  24. How to detect a React component vs. a React element?
  25. React – How to open PDF file as a href target blank
  26. How to check for broken images in React JS
  27. Why is it necessary to use bind when working with ES6 and ReactJS?
  28. Browser Detection in ReactJS
  29. Exporting functions with reactjs and babel
  30. Enzyme simulate an onChange event

Leave a Comment