Immutability makes complex features much easier to implement. The result is the same but by not mutating (changing the underlying data) directly, you gain several benefits.

Now `squares` is unchanged, but `nextSquares` first element is 'X' rather than `null` In the end the user sees that the upper left square has changed from empty to having a X after clicking it. This causes the value prop of the Square component with index 0 to change from null to X. The squares state of the Board component was updated, so the Board and all of its children re-render.handleClick uses the argument ( 0) to update the first element of the squares array from null to X.It calls handleClick with an argument of 0. The Board component defined that function directly in the JSX. The Square component received that function as its onSquareClick prop from the Board. Clicking on the upper left square runs the function that the button received as its onClick prop from the Square.Let’s recap what happens when a user clicks the top left square on your board to add an X to it: Keeping the state of all squares in the Board component will allow it to determine the winner in the future. When the Board’s state changes, both the Board component and every child Square re-renders automatically. When clicking on a Square, the child Square component now asks the parent Board component to update the state of the board. Now that your state handling is in the Board component, the parent Board component passes props to the child Square components so that they can be displayed correctly. The function returns a new array containing the copied values.Import

If end is greater than the sequence length, slice extracts through to the end of the sequence.

For example, slice(1,-1) extracts the first element through the second-to-last element in the sequence.

If negative, it extracts until the end of the sequence.

If not supplied, it extracts to the end of the sequence.

end (optional) : The ending index of the copied array.

If start is greater than the index range of the sequence, an empty array is returned.

For example, slice(-2) extracts the last two elements in the sequence.

If negative, it indicates an offset from the end of the sequence.

If not supplied, it starts from index 0.start (optional): The starting index of the copied array.The slice() method takes the following parameters: It saves this copied portion into a new array but does not modify the original array. The slice() method in JavaScript returns a shallow copy of an array’s selected portion.

Slice in react js