# Extra Customization

We've got some feedback from developers who see keeping the state of comments when navigating from post item to details is a bad experience (see the behavior below). We appreciate this feedback and it kind of makes sense because sometimes it creates confusion for end users. In the orginal behaviour, we are rendering the cached state of the post and its comments until the newly selected post renders. This could be good for some folks and bad for others:

![](/files/-MAEL9q3dXnDCcUmj3bh)

If we see more developers hate to see this behavior, we will include the update in the next release. However, if you've already purchased the app and you want to do these changes now, you can follow these steps:

**1-** go to `app/src/interfaces/store.d.ts` and add this line:

```
  export type ActionType =
    | "ClearCurrentPost" // <--- add this line
    | "Loading"
    ....
```

**2-** go to `app/src/store/reducers.ts` and add the following case in the switch statement:

```
    case "ClearCurrentPost":
      return { ...state, currentPost: intialState.currentPost };
```

**3-** go to `app/src/store/actions/post.ts` and add the following method:

```
export const clearCurrentPost = (dispatch: IStore.IDispatchProps): void => dispatch({ type: "ClearCurrentPost" });
```

**4-** go to `app/src/hooks/useCurrentPost.ts` and add the following method:

```
import { Store,..., clearCurrentPost } from "@store"; // <-- add clearCurrentPost here

..
const useCurrentPost = () => {
 ..
 ...
 ..

const clearPost = () => clearCurrentPost(dispatch); // <-- add this method -->
..
..
..
..
  return {
    clearPost, // <-- add this line as well
    currentPost,
    postId,
    getCurrentPost,
    addComment,
    deleteComment,
    isFetching,
    commenting,
  };

```

**5-** go to `app/src/screens/comments.tsx` and add the following lines:

```
/* 1- add clearPost in the following deconstruction */

const { currentPost, ... , clearPost } = useCurrentPost(navigation);

...
....

/* 2- call clearPost in cleanup method in useEffect */
  
  React.useEffect((): any => {
   ....
    return (): void => {
      // cleanup
      clearPost(); // <--- add this line --->
    };
  }, []);
```

**6- That's it!!! magic** 😃


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pencilr.gitbook.io/react-native-pencilr-app-with-backend/extra-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.