This is the expected behavior. You may want to use useEffect to access the latest value.

Here is a thread discussing the same issue: useState set method not reflecting change immediately

Hope this helps!

const initialState = {
  userId: 1,
  id: 1,
  title: "delectus aut autem",
  completed: false
};

export default function App() {
  const [data, setData] = React.useState(initialState);
  const handleChange = (event) =>
    setData((prev) => {
      return {
        ...prev,
        completed: event.target.checked
      };
    });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="checkbox" value={data.completed} onChange={handleChange} />
      <p>State looks currently like following:</p>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

https://codesandbox.io/s/cocky-neumann-tczrp5

There are 2 options depending on your needs.

1. You could keep your all of your data and selected state in a single stateful array. On press, you need to find the item in the array that will update.

export default function Grocery({ navigation }) {
  const [state, setState] = React.useState([ { label: 'pasta', pressed: false, }, { label: 'eggs', pressed: false, }, { label: 'fish', pressed: false, }, { label: 'salad', pressed: false, }, ]);

  const handlePress = (i) => {
    const newState = [...state];
    newState[i].pressed = !state[i].pressed;
    setState(newState);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={state}
        ListHeaderComponent={() => (
          <Button
            title="home"
            onPress={() => {console.log('press home')}}>
            press
          </Button>
        )}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            key={index}
            id={index}
            onPress={() => handlePress(index)}
            style={[
              styles.flatListTouchable,
              item.pressed && styles.flatListTouchablePressed,
            ]}>
            <Text style={styles.flatListTouchableText}>{item.label}</Text>
          </TouchableOpacity>
        )}
      />
    </SafeAreaView>
  );
}

Snack

2. You could keep your data and selected state separately. The selected state is managed in the child component.

const data = [ { label: 'pasta', }, { label: 'eggs', }, { label: 'fish', }, { label: 'salad', }, ];

export default function Grocery({ navigation }) {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={data}
        ListHeaderComponent={() => (
          <Button
            title="home"
            onPress={() => {
              console.log('press home');
            }}>
            press
          </Button>
        )}
        renderItem={({ item, index }) => (
          <RenderItem item={item} index={index} />
        )}
      />
    </SafeAreaView>
  );
}

const RenderItem = ({ item, index }) => {
  const [pressed, setPressed] = React.useState(false);

  const handlePress = () => {
    setPressed(!pressed);
  };

  return (
    <TouchableOpacity
      key={index}
      id={index}
      onPress={handlePress}
      style={[
        styles.flatListTouchable,
        pressed && styles.flatListTouchablePressed,
      ]}>
      <Text style={styles.flatListTouchableText}>{item.label}</Text>
    </TouchableOpacity>
  );
};

Snack

@kunal panchal's answer is totally valid Javascript, but it does cause a Typescript error because the type of event.target.id is string so Typescript does not know for sure that it's a valid key of emailNotifications. You have to assert that it is correct by using as.

!emailNotifications[event.target.id as keyof EmailNotifications]

One way to avoid this is to get the boolean value by looking at the checked property on the input rather than toggling the state.

As a sidenote, it's a good best practice to get the current state by using a setState callback so that you always get the correct value if multiple updates are batched together.

const _handleEmailNotificationsSettings = (
  event: React.ChangeEvent<HTMLInputElement>
) => {
  setEmailNotifications(prevState => ({
    ...prevState,
    [event.target.id]: event.target.checked,
  }));
};

This is probably the best solution for a checkbox.

Another approach which is more flexible to other situations is to use a curried function. Instead of getting the property from the event.target.id, where it will always be string, we pass the property as an argument to create an individual handler for each property.

const handleEmailNotificationsSettings = (
  property: keyof EmailNotifications
) => () => {
  setEmailNotifications((prevState) => ({
    ...prevState,
    [property]: !emailNotifications[property]
  }));
};

or

const handleEmailNotificationsSettings = (
  property: keyof EmailNotifications
) => (event: React.ChangeEvent<HTMLInputElement>) => {
  setEmailNotifications((prevState) => ({
    ...prevState,
    [property]: event.target.checked
  }));
};

which you use like this:

<input
  type="checkbox"
  checked={emailNotifications.favourites}
  onChange={handleEmailNotificationsSettings("favourites")}
/>

Those solutions avoid having to make as assertions in the event handler, but sometimes they are inevitable. I am looping through your state using (Object.keys(emailNotifications) and I need to make an assertion there because Object.keys always returns string[].

import React, { useState } from "react";

// I am defining this separately so that I can use typeof to extract the type
// you don't need to do this if you have the type defined elsewhere
const initialNotifications = {
  rating: false,
  favourites: false,
  payments: false,
  refunds: false,
  sales: false
};

type EmailNotifications = typeof initialNotifications;

const MyComponent = () => {
  // you don't really need to declare the type when you have an initial value
  const [emailNotifications, setEmailNotifications] = useState(
    initialNotifications
  );

  const handleEmailNotificationsSettings = (
    property: keyof EmailNotifications
  ) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setEmailNotifications((prevState) => ({
      ...prevState,
      [property]: event.target.checked
    }));
  };

  return (
    <div>
      {(Object.keys(emailNotifications) as Array<keyof EmailNotifications>).map(
        (property) => (
          <div key={property}>
            <label>
              <input
                type="checkbox"
                id={property}
                checked={emailNotifications[property]}
                onChange={handleEmailNotificationsSettings(property)}
              />
              {property}
            </label>
          </div>
        )
      )}
    </div>
  );
};

export default MyComponent;